React项目如何将application.js的item._id传递到detail.js按ID拉取数据

问题核心原因&修改方案 #

你现在的问题出在3个地方，按顺序改完就能跑通：

1. application.js传参逻辑错误

你当前写的handleClick只接收1个参数，调用时传入的item._id没有被拼接到路由路径里，修改方案：
直接修改按钮点击逻辑，把ID拼到跳转路径中，不需要额外改handleClick：

// 修改application.js中Button的onClick逻辑
<Button onClick={() => handleClick(`/detail/${item._id}`)}>
  Detail
</Button>

如果你要保留两个参数的传法，也可以改handleClick的定义：

const handleClick = (location, id) => {
  console.log(location, id);
  history.push(`${location}/${id}`);
};

2. 路由配置需要匹配带参数的路径

找到你项目里写路由规则的地方，确保详情页的路由配置带上_id参数，参数名要和你detail.js里useParams解构的名字完全一致：

// react-router-dom v5 写法
<Route path="/detail/:_id" component={Details} />

// react-router-dom v6 写法
<Route path="/detail/:_id" element={<Details />} />

3. detail.js的逻辑优化

你有两个小问题会导致拿不到数据或者渲染异常：

• 初始data定义为数组，但接口返回的是单条对象，会导致读取属性时报错/空白
• useEffect没有加_id依赖，ID更新时不会重新请求接口
  修改后的对应代码：

// 初始值改成空对象
const [data, setData] = useState({});

// useEffect加_id依赖，避免无意义请求
useEffect(() => {
  if (!_id) return;
  axios
    .get(`http://localhost:5000/api/kam/${_id}`)
    .then((response) => {
      console.log(response);
      setData(response.data.kamData);
    })
    .catch((error) => {
      console.log(error);
    });
}, [_id]);

你也可以在渲染前加个判断，避免数据未加载完成时显示空白：

// return里的内容外层加判断
return (
  <div className="content">
    {Object.keys(data).length === 0 ? <p>加载中...</p> : <>
    {/* 原有渲染内容 */}
    </>}
  </div>
)

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