為什么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 而運行第二次。