React Hook useEffect 在函数调用时缺少依赖项

Question

由于 eslint 的警告，我正在苦苦挣扎。

下面是示例代码，一旦我运行下面的代码，我就会从 eslint 得到警告。

React Hook useEffect has a missing dependency: 'maxId'. Either include it or remove the dependency array.

如何删除警告？

我想让进程只在 pageNo 和 StartDate 改变时调用 loadMapData 函数。

示例代码；

import React, { useState, useEffect, useCallback } from "react";

const VehicleHistory = (props) => {
  //console.log("VehicleHistory");
  
  const pageSize = 10;

  const [mapData, setMapData] = useState();
  const [pageNo, setpageNo] = useState(1);
  const [startDate, setstartDate] = useState(100);
  const [maxId, setmaxId] = useState(0);

  useEffect(() => {
    console.log("useEffect.pageNo chainging====");

    
  const loadMapData = async () => {
    console.log('call loadMapData====');  
    try {
        //Api call to get list data
        //No meaning. Just for testing
        const _pageNo = pageNo;
        const _pageSize = pageSize
        const _maxId = maxId;
        setMapData('test'+_pageNo + _pageSize+_maxId);
        setmaxId(_pageNo + _pageSize);

    } catch (err) {
      console.log("err", err);
    }
  }

  
    loadMapData();
  }, [pageNo]);


  useEffect(() => {
    console.log("useEffect.startDate chainging====");
    setMapData(null);
    setpageNo(1);

  }, [startDate]);




  return (
    <div>
      <button onClick={e => setpageNo(p => p + 1)}>Change page</button>
      <button onClick={e => setstartDate(s => s + 1)}>Change date</button>
      
      <br />pageNo : {pageNo}
      <br />startdate : {startDate}
      <br />mapdata : {mapData}
    </div>
    
  );
};

export default VehicleHistory;

Answer 1

此代码中存在问题。基本上在useEffect 内，您期待maxId。您需要了解useEffect 的工作原理。 useEffect 必需的依赖数组，确保它在这些值更改时运行。所以在你的情况下maxId 正在改变。而useEffect 不确定这就是 eslint 给出错误的原因。

useEffect(() => {
    console.log("useEffect.pageNo chainging====");

    
  const loadMapData = async () => {
    console.log('call loadMapData====');  
    try {
        //Api call to get list data
        //No meaning. Just for testing
        const _pageNo = pageNo;
        const _pageSize = pageSize
        const _maxId = maxId; <- Issue is here
        setMapData('test'+_pageNo + _pageSize+_maxId);
        setmaxId(_pageNo + _pageSize);

    } catch (err) {
      console.log("err", err);
    }
  }

  
    loadMapData();
  }, [pageNo]);

解决方案：

useEffect(() => {
...code
},[pageNo,maxId]) <- add maxId in dependency array