React路由动态子菜单URL变更仅首次点击视图更新问题求解

问题根因 #

当你在同一路由规则/service/:id下切换不同id时，<Service>组件不会触发卸载重挂载，仅会更新props中的路由参数。你当前的useEffect设置了空依赖数组，仅会在组件首次挂载时执行一次接口请求，后续id变化不会自动触发重新拉取数据，因此视图内容不会更新。

修复方案 #

修改Service.js文件中useEffect的依赖数组，将路由参数id加入依赖，当id变化时自动重新执行接口请求，同时建议添加请求取消逻辑，避免组件卸载后请求返回触发无意义的state更新。

修改后的Service.js代码 #

const Service = (props) =>{
   const [service, setservice] = useState([]);
   const id = props.match.params.id;
    React.useEffect(() => {
        // 声明AbortController用于取消请求
        const controller = new AbortController();
        const signal = controller.signal;

        fetch("http://127.0.0.1:8000/api/service/"+ id, { signal })
          .then(results => results.json())
          .then(res => {
            const service = res.data.service;
            setservice(service);
          })
          .catch(err => {
            // 忽略取消请求的报错
            if (err.name !== 'AbortError') {
              console.error('请求失败:', err);
            }
          });
        
        // 组件卸载/依赖变化时取消未完成的请求
        return () => controller.abort();
      }, [id]); // 加入id作为依赖，id变化时重新执行Effect
   return (
      <div>
      {
         service.map((service, index) =>(
         <div key={index}>
           <h6 className="heading ">{service.service_name}</h6>             
         </div>
         ))
       }
       </div>
);
}
export default withRouter(Service);

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