为什么useEffect里面的console.log会运行两次

Question

我目前正在使用 react 项目，该项目从 api 获取数据并将其显示在控制台上。

虽然我在 useEffect 钩子中只写了一次 console.log()（带有 [articles] 依赖项），但 web 浏览器的 console.log 总是像这样显示 console.log 两次：在此处输入图像描述

但我不知道为什么..

在我的想法中，当第一个 useEffect 钩子设置的“文章”state 时，第二个 useEffect 钩子激活并且 console.log 应该只运行一次......但它没有。

这是我的代码

 const NewsList = () => { const [articles, setArticles] = useState([]); useEffect(()=> { const getData = async () => { const response = await axios.get(`https://newsapi.org/v2/top-headlines?country=kr&apiKey='' `); setArticles(response.data.articles); } getData(); },[]) useEffect(()=> { console.log(articles); },[articles]) return ( <div className="newsListBlock"> <NewsArticle article={article}></NewsArticle> <NewsArticle article={article}></NewsArticle> <NewsArticle article={article}></NewsArticle> <NewsArticle article={article}></NewsArticle> <NewsArticle article={article}></NewsArticle> </div> ); };

Answer 1

每次依赖项更改时都会运行效果。

1. 第一个值，在组件的第一次更新时，是[] （初始状态）。
2. 在数据获取效果运行之后，第二个值是您从 newsapi.org 获得的任何值。

此外，如果您使用<StrictMode>和 React 开发构建，则可以调用某些生命周期两次。 参见例如 这个代码框； 如果你从index.js中删除<StrictMode> ，你会看到更少的 console.logs。

Answer 2

来自官方反应文档：

通过使用这个 Hook，你告诉 React 你的组件需要在渲染之后做一些事情。

所以这个useEffect将在组件的第一次渲染时运行一次，然后由于使用更新articles的setArticles function 而运行第二次。