React应用中对象更新与API同步：事件处理与ID传递实践

const vehicles = [{
    "id": "-NXfnDLxXbeX1JUNaTJY",
    "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组件示例
function Grid({ vehicles, editVehicle, deleteHandler }) {
  return (
    <div className="grid-container">
      {vehicles.map((vehicle) => (
        <VehicleCard
          url={vehicle.id}
          key={vehicle.id}
          imgSrc={vehicle.imgSrc}
          title={vehicle.title}
          subtitle={vehicle.subtitle}
          // 关键：在这里将vehicle.id作为参数传递给editVehicle函数
          editVehicle={() => editVehicle(vehicle.id)}
          deleteHandler={() => deleteHandler(vehicle.id)}
        />
      ))}
    </div>
  );
}

// VehicleCard组件示例
import React from 'react';
// 假设VehicleCardWrapper, VehicleCardFigure, VehicleCardImage, VehicleCardTitle, VehicleCardSubtitle, Button, Link 是你的样式化组件或普通组件
const VehicleCard = ({ url, imgSrc, title, subtitle, editVehicle, deleteHandler }) => {
  return (
    <VehicleCardWrapper>
      <Link to={`/vehicle/${url}`}> {/* 使用url（即vehicle.id）构建详情页链接 */}
        <VehicleCardFigure>
          <VehicleCardImage src={imgSrc} alt={title} />
        </VehicleCardFigure>
        <VehicleCardTitle>{title}</VehicleCardTitle>
        <VehicleCardSubtitle>{subtitle}</VehicleCardSubtitle>
      </Link>
      <div>
        <Button isSecondary onClick={editVehicle}> {/* 直接调用父组件传递的editVehicle函数 */}
          Edit
        </Button>
        <Button isSecondary onClick={deleteHandler}> {/* 直接调用父组件传递的deleteHandler函数 */}
          Delete
        </Button>
      </div>
    </VehicleCardWrapper>
  );
};

// 错误的editVehicle实现
const editVehicle = (key) => {
    // 错误：试图在vehicles数组上访问一个名为'key'的属性，而key本身就是ID
    console.warn("function called", vehicles.key); 
};

// 正确的editVehicle实现
const editVehicle = (id) => {
    console.warn("Edit function called for vehicle ID:", id);
    // 在这里，id就是你想要编辑的车辆的唯一标识符
    // 接下来可以根据这个ID进行API调用或其他操作
};

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

// 假设这是一个更完整的父组件，包含状态和API交互逻辑
function VehicleManagementApp() {
  const [vehicles, setVehicles] = useState([]);
  const API_BASE_URL = 'https://your-api-endpoint.com/vehicles'; // 替换为你的API地址

  useEffect(() => {
    // 组件挂载时从API加载车辆数据
    fetchVehicles();
  }, []);

  const fetchVehicles = async () => {
    try {
      const response = await fetch(API_BASE_URL);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      setVehicles(data);
    } catch (error) {
      console.error("Error fetching vehicles:", error);
    }
  };

  const editVehicle = async (id) => {
    console.log("Attempting to edit vehicle with ID:", id);

    // 1. (可选) 获取要编辑的车辆的当前数据，用于预填充表单
    // try {
    //   const response = await fetch(`${API_BASE_URL}/${id}`);
    //   const currentVehicleData = await response.json();
    //   // ... 打开编辑表单，预填充 currentVehicleData
    // } catch (error) {
    //   console.error("Error fetching vehicle for edit:", error);
    // }

    // 假设用户已经在一个编辑表单中修改了数据，并提交了新的数据
    // 这里我们模拟一个更新操作，例如将标题改为 "Updated Title"
    const updatedData = { title: "Updated Title", color: "blue" }; // 实际中，这会来自用户输入

    try {
      const response = await fetch(`${API_BASE_URL}/${id}`, {
        method: 'PATCH', // 或 'PUT'，取决于你的API设计
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(updatedData),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const result = await response.json(); // API可能返回更新后的对象
      console.log("Vehicle updated successfully:", result);

      // 2. 更新本地状态以反映API的更改
      setVehicles(prevVehicles =>
        prevVehicles.map(vehicle =>
          vehicle.id === id ? { ...vehicle, ...updatedData } : vehicle // 仅更新对应ID的车辆
        )
      );
      // 或者，如果API返回了完整的更新后对象，可以直接使用 result
      // setVehicles(prevVehicles =>
      //   prevVehicles.map(vehicle =>
      //     vehicle.id === id ? result : vehicle
      //   )
      // );

    } catch (error) {
      console.error("Error updating vehicle:", error);
      // 处理错误，例如显示错误消息给用户
    }
  };

  const deleteHandler = async (id) => {
    console.log("Attempting to delete vehicle with ID:", id);
    try {
      const response = await fetch(`${API_BASE_URL}/${id}`, {
        method: 'DELETE',
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      console.log("Vehicle deleted successfully.");

      // 从本地状态中移除已删除的车辆
      setVehicles(prevVehicles => prevVehicles.filter(vehicle => vehicle.id !== id));

    } catch (error) {
      console.error("Error deleting vehicle:", error);
    }
  };

  return (
    <div>
      <h1>Vehicle Management</h1>
      <Grid vehicles={vehicles} editVehicle={editVehicle} deleteHandler={deleteHandler} />
    </div>
  );
}