React中对象数据更新与API同步指南

// 车辆数据示例
const vehicles = [{
    "id": "-NXfnDLxXyzABCDE",
    "title": "Chevrolet",
    "subtitle": "C3500",
    "imgSrc": "...",
    "description": "...",
    "color": "grey"
}, {
    "id": "-NXg3rkWSfsFIul_65su",
    "title": "Volkswagen",
    "subtitle": "Passat",
    "imgSrc": "...",
    "color": "yellow"
}];

// VehicleCard 组件（简化版）
function VehicleCard({ url, imgSrc, title, subtitle, editVehicle }) {
  return (
    <div>
      {/* ...其他展示内容... */}
      <button onClick={editVehicle}>Edit</button>
    </div>
  );
}

// Grid 组件渲染车辆列表
function Grid({ vehicles, editVehicle }) {
  return (
    <div>
      {vehicles.map((vehicle) => (
        <VehicleCard
          url={vehicle.id}
          key={vehicle.id}
          imgSrc={vehicle.imgSrc}
          title={vehicle.title}
          subtitle={vehicle.subtitle}
          editVehicle={() => editVehicle(vehicle.id)} // 注意这里如何传递id
        />
      ))}
    </div>
  );
}

// 错误的editVehicle函数实现
const editVehicle = (key) => {
    console.warn("function called", vehicles.key); // 错误：试图访问vehicles数组的'key'属性
};

// 正确的editVehicle函数实现
const editVehicle = (id) => {
    console.warn("function called with ID:", id); // 正确：直接使用id参数
    // 后续逻辑将使用这个id来查找和更新车辆
};

import React, { useState, useEffect } from 'react';

// 假设这是一个父组件
function VehicleManager() {
  const [vehicles, setVehicles] = useState([]);
  const [editingVehicleId, setEditingVehicleId] = useState(null); // 用于标识当前正在编辑的车辆ID

  // 模拟从API加载数据
  useEffect(() => {
    const fetchVehicles = async () => {
      // 实际应用中会是一个API调用
      const data = [
        { "id": "-NXfnDLxXyzABCDE", "title": "Chevrolet", "subtitle": "C3500", "imgSrc": "...", "description": "...", "color": "grey" },
        { "id": "-NXg3rkWSfsFIul_65su", "title": "Volkswagen", "subtitle": "Passat", "imgSrc": "...", "color": "yellow" }
      ];
      setVehicles(data);
    };
    fetchVehicles();
  }, []);

  // 1. 触发编辑模式
  const handleEditVehicle = (id) => {
    setEditingVehicleId(id); // 设置当前正在编辑的车辆ID
    // 可以在这里加载车辆详情到表单，或者导航到编辑页面
    console.log(`准备编辑车辆ID: ${id}`);
  };

  // 2. 实际更新车辆数据（例如，从一个编辑表单提交）
  const updateVehicleInStateAndApi = async (updatedVehicleData) => {
    // 查找并更新本地状态
    const updatedVehicles = vehicles.map((vehicle) =>
      vehicle.id === updatedVehicleData.id ? { ...vehicle, ...updatedVehicleData } : vehicle
    );
    setVehicles(updatedVehicles); // 更新React状态

    // 同步到API
    try {
      // 实际应用中，这里会是一个PUT或PATCH请求
      // const response = await fetch(`/api/vehicles/${updatedVehicleData.id}`, {
      //   method: 'PUT',
      //   headers: {
      //     'Content-Type': 'application/json',
      //   },
      //   body: JSON.stringify(updatedVehicleData),
      // });
      // if (!response.ok) {
      //   throw new Error('Network response was not ok');
      // }
      console.log(`车辆ID: ${updatedVehicleData.id} 已在本地更新并尝试同步到API。`);
      setEditingVehicleId(null); // 退出编辑模式
    } catch (error) {
      console.error('更新车辆失败:', error);
      // 错误处理：可能需要回滚本地状态或显示错误消息
    }
  };

  // 假设有一个表单组件来处理编辑
  const VehicleEditForm = ({ vehicle, onSave, onCancel }) => {
    const [formData, setFormData] = useState(vehicle);

    const handleChange = (e) => {
      const { name, value } = e.target;
      setFormData(prev => ({ ...prev, [name]: value }));
    };

    const handleSubmit = (e) => {
      e.preventDefault();
      onSave(formData);
    };

    return (
      <form onSubmit={handleSubmit}>
        <h3>编辑车辆: {vehicle.title}</h3>
        <label>
          标题:
          <input type="text" name="title" value={formData.title} onChange={handleChange} />
        </label>
        <br/>
        <label>
          副标题:
          <input type="text" name="subtitle" value={formData.subtitle} onChange={handleChange} />
        </label>
        <br/>
        <button type="submit">保存</button>
        <button type="button" onClick={onCancel}>取消</button>
      </form>
    );
  };

  const currentEditingVehicle = editingVehicleId
    ? vehicles.find(v => v.id === editingVehicleId)
    : null;

  return (
    <div>
      <h1>车辆管理</h1>
      {currentEditingVehicle ? (
        <VehicleEditForm
          vehicle={currentEditingVehicle}
          onSave={updateVehicleInStateAndApi}
          onCancel={() => setEditingVehicleId(null)}
        />
      ) : (
        <Grid vehicles={vehicles} editVehicle={handleEditVehicle} />
      )}
    </div>
  );
}

// Grid 组件 (与之前相同)
function Grid({ vehicles, editVehicle }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
      {vehicles.map((vehicle) => (
        <VehicleCard
          url={vehicle.id}
          key={vehicle.id}
          imgSrc={vehicle.imgSrc}
          title={vehicle.title}
          subtitle={vehicle.subtitle}
          editVehicle={() => editVehicle(vehicle.id)}
        />
      ))}
    </div>
  );
}

// VehicleCard 组件 (与之前相同，添加了一些样式以便展示)
function VehicleCard({ url, imgSrc, title, subtitle, editVehicle }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px', textAlign: 'center' }}>
      <img src={imgSrc || 'https://via.placeholder.com/100'} alt={title} style={{ width: '100px', height: '100px', objectFit: 'cover' }} />
      <h3>{title}</h3>
      <p>{subtitle}</p>
      <button onClick={editVehicle} style={{ padding: '8px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Edit</button>
    </div>
  );
}

export default VehicleManager;