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

Question

我正在尝试在 React 组件内进行 2 个 HTTP 调用，然后调用 2 个使用 useState 定义的属性的设置器。为了防止无限重新渲染，我遵循了我认为正确的做法，但这种情况仍在发生。这是我的代码：

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();
}, []);

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

React infinity loop when making HTTP calls using useEffect

http

infinite-loop

reactjs