React中Axios GET请求无法获取useParams的id填充编辑表单问题

核心问题 #

你的代码中useEffect的依赖数组为空，导致组件首次挂载时若id还未从路由参数解析完成，会用undefined拼接API地址触发400错误；同时后续id发生变化时，也不会重新发起请求。另外需确认路由参数名称确实是id，避免解构错误。

具体修复步骤 #

1. 给useEffect添加正确依赖项 #

将id加入useEffect的依赖数组，确保id更新时重新执行请求，且请求前先判断id是否存在，避免无效请求：

const { id } = useParams();

useEffect(() => {
  if (!id) return;

  axios.all([
    axios.get(
      `http://localhost:8080/reservations/${id}`,
      {
        headers: {
          'Authorization': 'Bearer ' + sessionStorage.getItem("token")
        }
      }
    ),
    axios.get(
      'http://localhost:8080/room-types',
      {
        headers: {
          'Authorization': 'Bearer ' + sessionStorage.getItem("token")
        }
      }
    )
  ])
    .then(axios.spread((reservationResponse, roomTypesResponse) => {
      console.log(reservationResponse.data, roomTypesResponse.data);
      setReservation(reservationResponse.data);
      setRoomTypes(roomTypesResponse.data); 
    }))
    .catch(() => {
      setApiError(true);
    })
}, [id]); // 添加id作为依赖

2. 验证路由参数配置 #

确认你的路由定义中参数名称确实是id，比如React Router的路由配置应类似：

<Route path="/reservations/edit/:id" element={<ReservationEditForm />} />

如果路由参数名是其他值（如reservationId），需对应修改解构语句：

const { reservationId } = useParams();
// 请求地址改为 `http://localhost:8080/reservations/${reservationId}`

3. 可选：添加加载与错误状态优化 #

为提升用户体验，可添加加载状态避免空白表单，同时明确错误提示：

const [loading, setLoading] = useState(true);

useEffect(() => {
  if (!id) return;
  setLoading(true);
  axios.all([/* 请求内容 */])
    .then(() => {
      // 原有赋值逻辑
      setLoading(false);
    })
    .catch(() => {
      setApiError(true);
      setLoading(false);
    })
}, [id]);

// 渲染时判断状态
if (loading) return <div>加载中...</div>;
if (apiError) return <div>加载失败，请重试</div>;
// 渲染表单内容

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