React Hook useEffect 缺少依賴項：updateFunction

Question

我有這個代碼，我在那里使用 useEffect 用無限滾動更新我的頁面。 但是在編譯時，我看到了這個錯誤

src\components\News.js
  Line 40:6:  React Hook useEffect has missing dependencies: 'props.category' and 'updateNews'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

但是當我在依賴數組[page, props.category, updateNews]包含這個函數時[page, props.category, updateNews]我收到了另一個錯誤

Line 17:9:  The 'updateNews' function makes the dependencies of useEffect Hook (at line 40) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'updateNews' in its own useCallback() Hook  react-hooks/exhaustive-deps

這是我的代碼： 每當用戶滾動頁碼時都會更新並調用 use Effect 鈎子，而后者又調用 updateNews 函數。

import React, { useEffect, useState } from "react";
import NewsItem from "./NewsItem";
import Spinner from "./Spinner";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-component";

const News = (props) => {
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [totalResults, setTotalResults] = useState(0);

  const capitalizeFirstLetter = (string) => {
    return string.charAt(0).toUpperCase() + string.slice(1);
  };

  const updateNews = async () => {
    props.setProgress(10);
    let goToPage = page;
    const url = `https://newsapi.org/v2/top-headlines?country=${props.country}&category=${props.category}&apiKey=${props.apiKey}&page=${goToPage}&pageSize=${props.pageSize}`;
    props.setProgress(30);
    let data = await fetch(url);
    props.setProgress(50);
    let parsedData = await data.json();
    props.setProgress(70);
    if (parsedData) {
      setArticles(articles.concat(parsedData.articles));
      setLoading(false);
      setPage(page);
      setTotalResults(parsedData.totalResults);
    }
    props.setProgress(100);
  };

  useEffect(() => {
    updateNews();
    // eslint-disable-next-line
    
    document.title = `${capitalizeFirstLetter(props.category)} - NewsMonkey`;
  }, [page, props.category]);

  const fetchMoreData = async () => {
    setPage(page + 1);
  };

  return (
    <>
      <h3 className="text-center" style={{ marginTop: "4%" }}>
        NewsMonkey - Top {`${capitalizeFirstLetter(props.category)}`} Headlines
      </h3>
      {loading && <Spinner />}
      <InfiniteScroll
        dataLength={articles.length}
        next={fetchMoreData}
        hasMore={articles.length < totalResults}
        loader={<Spinner />}
      >
        <div className="container">
          <div className="row">
            {articles.map((element) => {
              return (
                <div className="col-md-4" key={element.url}>
                  <NewsItem
                    title={
                      element && element.title ? element.title.slice(0, 45) : ""
                    }
                    description={
                      element && element.description
                        ? element.description.slice(0, 50)
                        : ""
                    }
                    imageUrl={element.urlToImage}
                    newsUrl={element.url}
                    author={element.author}
                    date={element.publishedAt}
                    source={element.source.name}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </InfiniteScroll>
    </>
  );
};

export default News;

注意：我嘗試了作為對這個問題的建議而得到的答案，但這對我不起作用。

Answer 1

您的解決方案實際上是在錯誤中提供的。 在依賴數組中包含updateNews之后，在每次重新渲染時沒有任何記憶，React 總是會看到updateNews !== updateNews ，這是由於 JS 的性質（即使相同編寫的函數也永遠不會彼此相等）。

將updateNews函數包裝在useCallback基本上可以讓 React 知道這個函數在每次重新渲染時都是相同的，直到它的依賴項數組項之一發生變化。

這應該有效：

const updateNews = useCallback(async () => {
    props.setProgress(10);
    let goToPage = page;
    const url = `https://newsapi.org/v2/top-headlines?country=${props.country}&category=${props.category}&apiKey=${props.apiKey}&page=${goToPage}&pageSize=${props.pageSize}`;
    props.setProgress(30);
    let data = await fetch(url);
    props.setProgress(50);
    let parsedData = await data.json();
    props.setProgress(70);
    if (parsedData) {
      setArticles(articles.concat(parsedData.articles));
      setLoading(false);
      setPage(page);
      setTotalResults(parsedData.totalResults);
    }
    props.setProgress(100);
  }, [page, props.country, props.category, props.apiKey, props.pageSize]);

  useEffect(() => {
    updateNews();
    // eslint-disable-next-line
    
    document.title = `${capitalizeFirstLetter(props.category)} - NewsMonkey`;
  }, [props.category, updateNews]);

Answer 2

您可以查看此問題以獲取更多信息： How to fix missing dependency warning when using useEffect React Hook

但是你可能應該像這樣將你的函數移動到 useEffect 中：

 useEffect(() => {
   const updateNews = async () => {
     props.setProgress(10);
     let goToPage = page;
      const url = `https://newsapi.org/v2/top-headlines?country=${props.country}&category=${props.category}&apiKey=${props.apiKey}&page=${goToPage}&pageSize=${props.pageSize}`;
      props.setProgress(30);
      let data = await fetch(url);
      props.setProgress(50);
      let parsedData = await data.json();
      props.setProgress(70);
      if (parsedData) {
        setArticles(articles.concat(parsedData.articles));
        setLoading(false);
        setPage(page);
        setTotalResults(parsedData.totalResults);
      }
      props.setProgress(100);
    };
    updateNews();    
    document.title = `${capitalizeFirstLetter(props.category)} - NewsMonkey`;
  }, [page, props.category]);