React useState钩子无法设置packageId及跨页面传参问题咨询

一、为什么setPackageId后打印packageId无内容 #

React的useState状态更新是异步批量处理的，调用setPackageId(id)后，状态不会立即同步更新。所以你在updatePackage函数里直接打印packageId，拿到的其实是更新前的旧值，并非最新状态。

如果要验证状态是否真的更新，可以用useEffect监听packageId的变化，状态更新完成后会触发这个钩子：

import { useEffect } from 'react';

// 监听packageId变化
useEffect(() => {
  console.log('更新后的packageId:', packageId);
}, [packageId]); // 依赖项为packageId，状态变化时执行

二、将ID传递到updatePackage页面的两种方案 #

方案1：URL参数传递（推荐，刷新页面参数不丢失） #

这种方式把ID直接拼在URL里，直观且稳定：

1. 修改表格中的Link组件：

<Link to={`/package/updatePackage/${p._id}`}>Update/</Link>

2. 在路由配置中定义参数占位：

// 以react-router-dom v6为例
import { Routes, Route } from 'react-router-dom';
import UpdatePackagePage from './UpdatePackagePage';

<Routes>
  <Route path="/package/updatePackage/:packageId" element={<UpdatePackagePage />} />
</Routes>

3. 在UpdatePackagePage中获取参数：

import { useParams } from 'react-router-dom';

const UpdatePackagePage = () => {
  const { packageId } = useParams();
  // 这里就能拿到传递的ID
  return <div>更新套餐ID：{packageId}</div>;
};

方案2：Link的state属性传递（参数不显示在URL，刷新会丢失） #

如果不想把ID暴露在URL里，可以用这种方式：

1. 修改表格中的Link组件：

<Link 
  to={{
    pathname: "/package/updatePackage",
    state: { packageId: p._id }
  }}
>
  Update/
</Link>

2. 在UpdatePackagePage中获取state：

import { useLocation } from 'react-router-dom';

const UpdatePackagePage = () => {
  const location = useLocation();
  const packageId = location.state?.packageId; // 可选链避免状态丢失时报错
  return <div>更新套餐ID：{packageId}</div>;
};

注：如果只是为了传参到新页面，完全可以去掉当前页面的packageId状态和updatePackage函数，直接用上面的路由传参方案更简洁。

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