如何在用户点击MongoDB文档ID后从Mongoose动态获取数据？

你可以通过以下修改，实现点击车辆ID后获取对应MongoDB文档的详细数据：

1. 完整修改后的代码 #

import { useState, useEffect } from "react";

const ViewVehicles = () => {
  const [vehicles, setVehicles] = useState(null);
  // 新增状态存储选中的车辆详情
  const [selectedVehicle, setSelectedVehicle] = useState(null);

  // 获取车辆列表的逻辑保持不变
  useEffect(() => {
    const fetchVehicles = async () => {
      const response = await fetch("/headofDeployement/registerVehicle");
      const json = await response.json();

      if (response.ok) {
        setVehicles(json);
      }
    };

    fetchVehicles();
  }, []);

  // 根据ID获取单条车辆数据的函数
  const fetchSingleVehicle = async (vehicleId) => {
    const response = await fetch(`/headofDeployement/registerVehicle/${vehicleId}`);
    const json = await response.json();

    if (response.ok) {
      setSelectedVehicle(json);
    }
  };

  return (
    <div className="container ">
      <div className="row ">
        <div className="col justify-content-center align-center">
          <h4>Vehicles Registered</h4>
          {/* 车辆列表渲染 */}
          {vehicles &&
            vehicles.map((vehicle) => (
              <ul key={vehicle._id}>
                {/* 绑定点击事件触发数据获取 */}
                <span 
                  className="text-danger cursor-pointer"
                  onClick={() => fetchSingleVehicle(vehicle._id)}
                  style={{cursor: 'pointer'}}
                >
                  {vehicle._id}
                </span>
              </ul>
            ))}
          
          {/* 展示选中的车辆详情 */}
          {selectedVehicle && (
            <div className="mt-4 p-3 border rounded">
              <h5>车辆详情</h5>
              <p>ID: {selectedVehicle._id}</p>
              <p>品牌: {selectedVehicle.brand || '未填写'}</p>
              <p>型号: {selectedVehicle.model || '未填写'}</p>
              {/* 根据你的MongoDB文档结构添加更多字段 */}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ViewVehicles;

2. 关键改动说明 #

• 新增selectedVehicle状态，专门存储点击后获取的单条车辆数据
• 新增fetchSingleVehicle异步函数，通过车辆ID向后端请求对应文档数据（需确保后端提供/headofDeployement/registerVehicle/:id接口，接收ID参数并返回MongoDB中的单条数据）
• 将原空链接<a>改为可点击的<span>，绑定点击事件触发数据获取（也可保留<a>标签，但需添加e.preventDefault()阻止默认跳转行为）
• 在界面下方添加详情展示区域，根据selectedVehicle状态动态渲染数据

内容的提问来源于stack exchange，提问作者chala bultum