React Home组件API无限调用问题及useEffect依赖警告处理方案咨询

这个问题我碰到过好多次了，其实就是React Hooks的依赖检查机制在起作用——你已经用useEffect解决了无限循环的核心问题，但ESLint的exhaustive-deps规则在提醒你：useEffect里用到了setTopSearches，但没把它加入依赖数组。下面给你几个实用的解决办法，按优先级排序：

1. 把setTopSearches加入依赖数组（推荐） #

React中，useState返回的setter函数是稳定不变的——在组件的整个生命周期里，它的引用不会发生变化。所以把它加入依赖数组，完全不会导致useEffect重复执行，既解决了警告，又符合React的最佳实践。

修改后的代码如下：

import React, { useContext, useEffect } from "react";
import styled from "styled-components";
import MainContext from "../context/MainContext";
import { topSearchesURL } from "../api/base";
import { getResponse } from "../api";

const Home = () => {
  const { topSearches, setTopSearches } = useContext(MainContext);

  useEffect(() => {
    getResponse(
      topSearchesURL(),
      (data) => {
        setTopSearches(data);
        console.log(data);
      },
      (err) => alert(err)
    );
  }, [setTopSearches]); // 将setTopSearches加入依赖数组

  return <div></div>;
};

export default Home;

2. 用ESLint注释忽略警告（权宜之计） #

如果你非常确定setTopSearches永远不会变化，也可以用单行注释让ESLint跳过这个检查。不过这种方法不推荐，因为它会屏蔽ESLint的有用提示，万一后续setTopSearches的引用真的发生变化，可能会导致难以排查的bug。

代码示例：

useEffect(() => {
  getResponse(
    topSearchesURL(),
    (data) => {
      setTopSearches(data);
      console.log(data);
    },
    (err) => alert(err)
  );
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

3. 用useRef保存最新的setTopSearches引用（特殊场景） #

如果你的setTopSearches是来自自定义Context Provider的不稳定函数（比如不是直接由useState生成的），可以用useRef来保存它的最新引用。这样既不用加入依赖数组，又能确保调用的是最新版本的setter。不过这个场景比较少见，你的情况用第一种方法就足够了。

代码示例：

import React, { useContext, useEffect, useRef } from "react";
import styled from "styled-components";
import MainContext from "../context/MainContext";
import { topSearchesURL } from "../api/base";
import { getResponse } from "../api";

const Home = () => {
  const { topSearches, setTopSearches } = useContext(MainContext);
  const setTopSearchesRef = useRef(setTopSearches);

  // 实时更新ref里的setter引用
  useEffect(() => {
    setTopSearchesRef.current = setTopSearches;
  }, [setTopSearches]);

  useEffect(() => {
    getResponse(
      topSearchesURL(),
      (data) => {
        // 使用ref中保存的最新setter
        setTopSearchesRef.current(data);
        console.log(data);
      },
      (err) => alert(err)
    );
  }, []);

  return <div></div>;
};

export default Home;

总结一下：优先选择第一种方案，它是最安全、最符合React设计原则的解决方式。

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