javascript - 避免向 useEffect 添加不必要的依赖项

Question

我在我的应用程序中使用带有搜索的服务器端分页的 react 表。每当分页发生变化时，我都会使用 onPaginationChange调用 API 的 Prop 。但我也有一个搜索输入文本。为此，我使用 useEffect监听搜索文本变化并调用 API。

<Pagination 
    onPaginationChange={(pageSize, pageNo) => {
        setNoOfRecords(pageSize);
        dispatchGet(
            dispatch,
            currentOrg.id,
            pageSize,
            pageNo,
            searchText,
        );
    }} //this is ok
/>

我还有一个 searchText状态和 useEffect对于 searchText更改和 API 调用:

const [searchText, setSearchText] = useState("");

useEffect(() => {
    if (currentOrg) {
        dispatchGetSubOrgs(
            dispatch,
            currentOrg.id,
            noOfRecords,
            currentPage, // I get these from redux store and get updated when API calls
            searchText,
        );
    }
}, [searchText]);

这里 Eslint 提示我需要添加 currentPage到依赖数组。但是如果我添加它和 onPaginationChange由于某些分页更改而被调用，currentPage将更新和useEffect被调用并将调用 API 两次。
如果我忽略这个 Eslint 错误，会不会有问题？另外，我不知道为什么 React 要我在依赖数组中添加所有内容。如果我不想要 useEffect 怎么办？当依赖数组中的某些内容发生变化时运行？我被迫添加它，因为它可能具有陈旧的值。我该如何处理？

Answer 1

对于 useEffect ，这里是简单化的心态:“每个可能改变的变量，在外部定义的和我的回调函数使用的，都需要在我的依赖数组中，所以我知道什么时候我要求回调再次执行”。
但是作为开发人员，您可以自行选择该数组中的内容。您可以在 eslint-disable-next-line react-hooks/exhaustive-deps 的帮助下关闭这些警告。 ，像这样:

 useEffect(() => {
    if (currentOrg) {
      dispatchGetSubOrgs(
        dispatch,
        currentOrg.id,
        noOfRecords,
        currentPage,
        searchText,
      );
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchText]

但是你必须知道，系统地这样做可能会在 future 产生错误，因为你会失去这些警告。然而useEffect会正常工作，正如你决定的那样。