React useEffect依赖数组未含newsData，为何该状态出现黄色波浪线？

你的代码 #

import axios from "axios";
import { useState, useEffect } from "react";

import NewsItem from "../news-item/NewsItem";

const options = {
  method: "GET",
  url: "https://crypto-news11.p.rapidapi.com/cryptonews/bitcoin",
  params: {
    max_articles: "10",
    last_n_hours: "48",
    top_n_keywords: "10",
  },
  headers: {
    "X-RapidAPI-Key": "d8ef886044msh41d845fa9acd63ep1eb825jsnc6ceabb1a308",
    "X-RapidAPI-Host": "crypto-news11.p.rapidapi.com",
  },
};

const NewsList = () => {
  const [newsData, setnewsData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [url, setUrl] = useState(
    `https://crypto-news11.p.rapidapi.com/cryptonews/bitcoin`
  );

  const fetchBitcoin = () => {
    setUrl(`https://crypto-news11.p.rapidapi.com/cryptonews/bitcoin`);
  };
  const fetchBlockChain = () => {
    setUrl(`https://crypto-news11.p.rapidapi.com/cryptonews/blockchain`);
  };
  useEffect(() => {
    const fetchNews = async () => {
      try {
        setIsLoading(true);
        let { data } = await axios(url, options);
        setnewsData(data.articles);
        console.log(newsData);

        setIsLoading(false);
      } catch (error) {
        throw new Error();
      }
    };
    fetchNews();
  }, [url]);

  return (
    <>
      <button
        className="bg-green-400 text-white py-3 px-4"
        onClick={fetchBitcoin}
      >
        Bitcoin
      </button>
      <button
        className="bg-yellow-400 text-white py-3 px-4"
        onClick={fetchBlockChain}
      >
        BlockChain
      </button>
      <NewsItem news={newsData} loading={isLoading} />
    </>
  );
};

export default NewsList;

原因分析 #

黄色波浪线是ESLint的react-hooks/exhaustive-deps规则给出的提示：你在useEffect内部的fetchNews函数里调用了console.log(newsData)，但newsData并没有被加入到useEffect的依赖数组中。

另外要注意，这里的console.log(newsData)其实没有实际意义——因为React的状态更新是异步的，这行代码打印的是更新前的旧状态值，不是你刚通过setnewsData设置的新数据。

解决办法 #

• 最推荐：直接删除无效的console.log
  删掉console.log(newsData)这行代码，既解决了ESLint的提示，也去掉了无意义的调试代码。

• 如果需要查看最新的newsData
  单独加一个监听newsData变化的useEffect：

  useEffect(() => {
    console.log(newsData);
  }, [newsData]);
  

  这样每次newsData更新时，都会打印最新的值，同时符合hooks的依赖规则。

• 临时禁用ESLint提示（不推荐）
  如果你不想修改代码，可以在useEffect上方加注释禁用该规则，但这只是掩盖问题，不是解决问题：

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => {
    // ... 原代码
  }, [url]);
  

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