使用 useEffect 进行 HTTP 调用时反应无限循环

Question

我正在尝试在 React 组件中进行 2 个 HTTP 调用，然后该组件将为使用 useState 定义的 2 个属性调用 setter。为了防止无限重新渲染，我遵循了我认为正确的方法，但这仍然在发生。这是我的代码：

function Dashboard({ history = [] }) {
  const [teamInfo, setTeamInfo] = useState(null);
  const [survey, setSurvey] = useState(null);
  const [open, setOpen] = useState(false);
  const user = getUser();

  const getSurveyHandler = async () => {
    const surveyResponse = await getSurveys('standard');
    setSurvey(surveyResponse.data);
  };
  const getTeamInfoHandler = async () => {
    const teamInfoResponse = await getTeamInfo(user.teamId);
    setTeamInfo(teamInfoResponse);
  };     

  useEffect(() => {
    document.body.style.backgroundColor = '#f9fafb';

    getSurveyHandler();
    getTeamInfoHandler();
  }, [survey, teamInfo]);

如您所见，我已经在 useEffect 之外定义了函数，并将两个状态变量传递到将检查以防止无限重新渲染的依赖数组中。 谁能明白为什么这仍然发生？

谢谢

Answer 1

您在函数中设置survey 和teamInfo，并在useEffect 中依赖它们。

useEffect 每次依赖项更改时都会运行。您正在设置它们，导致重新渲染。由于它们发生了变化，useEffect 再次运行，再次设置它们。循环继续。

你需要删除那些。

 useEffect(() => {
    document.body.style.backgroundColor = '#f9fafb';

    getSurveyHandler();
    getTeamInfoHandler();
  }, []);

唯一推荐的另一件事是将async 函数移到useEffect 中，除非您需要从组件中的其他位置调用它们。

useEffect(() => {
    const getSurveyHandler = async () => {
        const surveyResponse = await getSurveys('standard');
        setSurvey(surveyResponse.data);
    };
    const getTeamInfoHandler = async () => {
        const teamInfoResponse = await getTeamInfo(user.teamId);
        setTeamInfo(teamInfoResponse);
    };
    document.body.style.backgroundColor = '#f9fafb';

    getSurveyHandler();
    getTeamInfoHandler();
}, []);