React Hook无限循环问题求助：调用含setState的fetch触发循环

问题原因 #

你直接在自定义Hook的顶层调用obterDadosSolicitacao()，而这个函数内部调用了setDadosSolicitacaoDevolucaoAmostra更新状态。React中，状态更新会触发使用该Hook的组件重新渲染，Hook会再次执行，再次调用请求函数，再次更新状态，形成无限循环。

当你只调用接口不更新状态时，没有触发重新渲染的条件，所以不会出现循环。

解决方法 #

用React的useEffect Hook控制请求的执行时机，它能帮你在特定时机执行数据请求这类副作用操作：

优化后的代码示例 #

const useDadosSolicitacao = (idSolicitacao: number) => {
  const [dadosSolicitacaoDevolucaoAmostra, setDadosSolicitacaoDevolucaoAmostra] = useState<IDadosSolicitacaoAmostra>();
  console.log('test');

  useEffect(() => {
    const obterDadosSolicitacao = async () => {
      try {
        // 替换硬编码的1为传入的idSolicitacao，让Hook更通用
        const resposta = await DadosSolicitacaoService.obterDadosSolicitacaoDevolucao(idSolicitacao);
        setDadosSolicitacaoDevolucaoAmostra(resposta.data);
      } catch (error) {
        if (error.response) {
          if (error.response.status === 404) {
            setDadosSolicitacaoDevolucaoAmostra(null);
          } else {
            // 可选：添加错误状态处理逻辑
            // setError(error.response.message);
          }
        }
      }
    };

    obterDadosSolicitacao();
  }, [idSolicitacao]); // 依赖idSolicitacao，参数变化时自动重新请求

  // Hook返回状态供使用它的组件获取数据
  return dadosSolicitacaoDevolucaoAmostra;
};

关键说明 #

• useEffect依赖数组：[idSolicitacao]确保只有当传入的idSolicitacao发生变化时，才会重新执行请求，避免无意义的重复调用。如果希望只在组件挂载时请求一次，可将依赖数组设为[]。
• 函数定义位置：把请求函数放在useEffect内部，避免每次渲染都创建新函数，减少不必要的性能开销。
• 异步代码优化：用try/catch替代.then/.catch，让异步逻辑更易读和维护。

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