React路由传参成功后目标页面下拉框数据不更新该如何解决

1. 修正导航跳转配置 #

当前导航的Link存在两个错误：一是使用单引号包裹路径导致模板变量${car.Make}不会被解析，二是路径和路由配置不匹配。修改为以下写法：

<Link to={`/service/appointment/${car.Make}`}> { serviceAppointment } </Link>

• 模板字符串必须用反引号`包裹才能正常解析变量，同时路径要和路由配置的/service/appointment/:id完全对应，才能正确把参数传入路由。

2. 给useEffect添加id依赖 #

当前useEffect没有指定依赖数组，无法监听到路由参数id的变化。修改useEffect代码：

useEffect(() => {
  console.log(id);
  scheduleAppointment(id);   
}, [id]);

• 把id加入依赖数组后，只要路由传入的id发生变化，useEffect就会自动触发回调执行，拉取对应id的下拉框数据，实现内容同步更新。同时可以避免无意义的重复接口调用。

3. 调整业务函数的参数传递 #

如果Appointment函数需要用到最新的id，直接在调用时传入当前id作为参数即可：

const Appointment = (currentId) => {
  // 调用API时传入currentId，即可拿到最新的id值
  getAvailableDate(currentId)
}

// 调用时传入最新的路由id
Appointment(id)

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