useEffect是否适用于API请求并设置状态？如何解决无限循环问题

当然可以用useEffect来做数据请求这类任务，问题出在你对依赖项的设置上，不是useEffect本身不适合。

先看你给出的例子，之所以无限循环，是因为把data放进了依赖数组里：每次请求完成调用setData更新data，依赖项变化会触发useEffect重新执行，再次发起请求更新data，就这么循环下去了。

解决这个问题的核心是只把真正需要触发请求重跑的变量放进依赖数组，下面是几种常见的正确做法：

• 仅组件挂载时请求一次：如果你的数据只需要在组件首次渲染时加载，直接用空数组[]作为依赖。此时linter可能会警告缺少依赖，但只要确认没有需要监听的变量，就可以用注释忽略警告：

const [data, setData] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    // 实际请求逻辑
    const response = await fetch('你的接口地址');
    const result = await response.json();
    setData(result);
  };
  fetchData();
}, []); // eslint-disable-next-line react-hooks/exhaustive-deps

• 根据特定变量触发请求：如果请求需要跟着某个变量（比如用户ID、筛选条件）变化，就把这个变量作为依赖，而不是data。比如：

const [userId, setUserId] = useState(1);
const [data, setData] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(`/api/users/${userId}`);
    const result = await response.json();
    setData(result);
  };
  fetchData();
}, [userId]); // 只有userId变化时才重新发起请求

• 避免重复请求并处理取消：如果担心组件卸载或依赖变化时出现重复请求，可以用AbortController取消未完成的请求，同时加加载状态防止重复触发：

const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchData = async () => {
    if (isLoading) return;
    setIsLoading(true);
    try {
      const response = await fetch('你的接口地址', { signal });
      const result = await response.json();
      setData(result);
    } catch (err) {
      if (err.name !== 'AbortError') {
        // 这里处理请求错误
      }
    } finally {
      setIsLoading(false);
    }
  };

  fetchData();

  return () => controller.abort(); // 组件卸载或依赖变化时取消请求
}, []);

总结一下：useEffect是React处理副作用（比如数据请求）的标准方式，只要正确设置依赖项，就能避免无限循环，不用怀疑它是否适合这类任务。

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