React中更新对象值并同步API的教程

const vehicles = [
    {
        "id": "-NXfnDLxUbeX1JUNaTJY",
        "title": "Chevrolet",
        "subtitle": "C3500",
        "imgSrc": "...",
        "description": "The fourth generation of the C/K series is a range of trucks that was manufactured by General Motors.",
        "color": "grey"
    },
    {
        "id": "-NXg3rkWSfsFIul_65su",
        "title": "Volkswagen",
        "subtitle": "Passat",
        "imgSrc": "...",
        "color": "yellow"
    },
    {
        "id": "-NXgPWOCSoXfKQuM4IHP",
        "title": "Peugeot",
        "subtitle": "208",
        "imgSrc": "...",
        "description": "The Peugeot 208 is a supermini car (B-segment in Europe) produced by the French automaker Peugeot.",
        "color": "white"
    }
];

// Grid component 渲染车辆列表
function VehicleGrid({ vehicles, onEditVehicle }) {
  return (
    <Grid>
      {vehicles.map((vehicle) => (
        <VehicleCard
          url={vehicle.id}
          key={vehicle.id}
          imgSrc={vehicle.imgSrc}
          title={vehicle.title}
          subtitle={vehicle.subtitle}
          // 当点击编辑时，传递车辆ID
          editVehicle={() => onEditVehicle(vehicle.id)}
        />
      ))}
    </Grid>
  );
}

// VehicleCard 组件（简化版）
function VehicleCard({ imgSrc, title, subtitle, editVehicle, deleteHandler }) {
  return (
    <VehicleCardWrapper>
      {/* ... 显示车辆信息 ... */}
      <div>
        <Button isSecondary onClick={editVehicle}>
          Edit
        </Button>
        <Button isSecondary onClick={deleteHandler}>
          Delete
        </Button>
      </div>
    </VehicleCardWrapper>
  );
}

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

const editVehicle = (key) => {
    // 正确：直接使用传递的 key 参数
    console.warn("function called", key); // 这将正确打印出车辆的ID
};

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

function App() {
  const [vehicles, setVehicles] = useState([]);
  const API_BASE_URL = 'YOUR_API_BASE_URL'; // 替换为你的API基础URL

  // 模拟从API加载数据
  useEffect(() => {
    const fetchVehicles = async () => {
      try {
        const response = await fetch(`${API_BASE_URL}/vehicles`);
        const data = await response.json();
        setVehicles(data);
      } catch (error) {
        console.error("Failed to fetch vehicles:", error);
      }
    };
    fetchVehicles();
  }, []);

  // 完整的编辑车辆函数
  const editVehicle = async (vehicleId, updatedData) => {
    // 1. 在本地状态中查找并更新车辆
    const updatedVehicles = vehicles.map(vehicle =>
      vehicle.id === vehicleId ? { ...vehicle, ...updatedData } : vehicle
    );
    setVehicles(updatedVehicles); // 立即更新UI以提供即时反馈

    // 2. 将更新发送到API
    try {
      const response = await fetch(`${API_BASE_URL}/vehicles/${vehicleId}`, {
        method: 'PUT', // 或 'PATCH'，取决于你的API设计
        headers: {
          'Content-Type': 'application/json',
          // 可能还需要认证token
        },
        body: JSON.stringify(updatedData),
      });

      if (!response.ok) {
        // 如果API更新失败，可以考虑回滚本地状态或显示错误消息
        console.error("Failed to update vehicle on API:", response.statusText);
        // 实际应用中可能需要更复杂的错误处理和状态回滚
        // setVehicles(vehicles); // 简单回滚
        alert("更新失败，请重试！");
      } else {
        console.log(`Vehicle ${vehicleId} updated successfully on API.`);
        // API成功响应后，如果API返回了最新的完整对象，可以用它来再次更新本地状态
        // const apiUpdatedVehicle = await response.json();
        // setVehicles(prev => prev.map(v => v.id === vehicleId ? apiUpdatedVehicle : v));
      }
    } catch (error) {
      console.error("Error sending update to API:", error);
      // setVehicles(vehicles); // 简单回滚
      alert("网络错误，更新失败！");
    }
  };

  // 示例：如何调用 editVehicle
  // 假设在一个编辑表单中提交了新的数据
  const handleSaveEdit = (id, newTitle, newColor) => {
    const dataToUpdate = { title: newTitle, color: newColor };
    editVehicle(id, dataToUpdate);
  };

  return (
    <div>
      <h1>我的车辆列表</h1>
      <VehicleGrid vehicles={vehicles} onEditVehicle={(id) => handleSaveEdit(id, "New Title", "blue")} />
      {/* 实际应用中，onEditVehicle 会打开一个编辑表单，然后表单提交时调用 handleSaveEdit */}
    </div>
  );
}

export default App;