useEffect依赖项失效疑问：部分页面未触发useEffect执行

结合你的代码和场景来看，核心问题大概率出在依赖数组不完整或闭包旧值捕获上，以下是具体分析和排查方向：

1. 依赖数组缺失导致的闭包问题 #

你的新闻页面useEffect代码如下：

useEffect(() => {
    navigate(NEWS_PAGE_ROUTE + `/${id}/${i18n.language}`)
}, [i18n.language])

回调函数里用到了id，但你没把它加入依赖数组，这会引发两个问题：

• 初始渲染时id未就绪：如果id是从路由参数（比如useParams()）、异步请求获取的，组件第一次渲染时id可能为undefined。此时i18n.language变化时，navigate的路径会是NEWS_PAGE_ROUTE//undefined/[语言]，这种无效路径不会触发路由更新，看起来就像useEffect没执行。
• id更新后无法触发回调：当id后续获取到有效值时，因为它不在依赖数组里，useEffect不会重新执行。就算之后i18n.language再次变化，useEffect捕获的还是旧的id值（闭包特性），依然会跳转无效路径，导致你误以为useEffect没触发。

2. 其他小概率排查方向 #

• 路径拼接格式错误：检查NEWS_PAGE_ROUTE的结尾是否带/，如果带的话，拼接后会出现重复斜杠（比如/news//1/en），这种路径可能被React Router忽略，导致路由无变化。可以用更安全的方式拼接：

  const targetPath = `${NEWS_PAGE_ROUTE.replace(/\/$/, '')}/${id}/${i18n.language}`
  navigate(targetPath)
  

• 组件挂载状态异常：确认i18n.language变化时，新闻页面组件是否处于挂载状态。如果组件已被卸载（比如路由已切换），useEffect自然不会触发。
• i18n.language类型异常：如果该页面的i18n.language是引用类型（比如对象）而非字符串，React的浅比较会认为值未变化，从而不触发useEffect。可以打印typeof i18n.language确认类型。

解决方案 #

最直接的修复是补全依赖数组，并增加id的有效性判断：

useEffect(() => {
    // 先判断id是否存在，避免无效跳转
    if (!id) return
    navigate(`${NEWS_PAGE_ROUTE}/${id}/${i18n.language}`)
}, [i18n.language, id, navigate])

• 加入id：确保id变化时能触发useEffect，同时避免闭包捕获旧值。
• 加入navigate：虽然React Router的navigate通常是稳定的，但严格模式下建议加入依赖，避免潜在的闭包问题。
• 增加id判断：避免在id未就绪时执行无效跳转。

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