React项目中useEffect内console.log执行两次的原因排查

触发两次console.log的原因 #

• React 18开发模式的严格机制：React 18在开发环境的严格模式下，会主动重复执行副作用函数（包括useEffect），以此检测潜在的副作用问题（比如未清理的定时器、重复请求等）。你的第二个useEffect依赖articles，因此会被执行两次。
• 初始状态与更新的两次触发：组件挂载时，articles初始值为空数组[]，此时第二个useEffect触发，输出空数组；API请求完成后setArticles更新状态，articles变为接口返回数据，第二个useEffect再次触发，输出新数组。

处理方案 #

1. 生产环境自动消除：生产环境下React不会执行重复触发的逻辑，发布后只会输出一次日志，开发阶段的重复输出属于正常检测行为，可忽略。
2. 调整日志触发条件：如果只想在articles有有效数据时输出，可添加长度判断：

useEffect(()=> {
  if(articles.length > 0) {
    console.log(articles);
  }
},[articles])

3. 修复组件渲染的错误：你代码中return部分的article变量未定义，会引发报错，应改为遍历articles数组渲染：

return (
  <div className="newsListBlock">
    {articles.map(article => (
      <NewsArticle key={article.url} article={article} />
    ))}
  </div>
);

4. 临时关闭严格模式（不推荐）：若需在开发时避免重复触发，可移除项目入口文件中包裹组件的<StrictMode>标签，但这会丧失严格模式的错误检测能力，不建议长期使用。

内容的提问来源于stack exchange，提问作者Stab-the-cake