Reactjs 使用几个HTTP调用来响应useEffect

我试图使用useEffect和useState在组件中进行许多HTTP调用，以存储此HTTP调用的结果。我原以为我对useEffect的工作原理有了基本的了解，但我不明白为什么我的代码不能工作，因此一定是实现错误了

以下是我的仪表板组件中的useEffect挂钩代码：

useEffect(() => {       
    isMounted.current = true;

    const fetchData = async () => {
      if (survey === null) {
        const surveyResponse = await getSurveys('standard');
        setSurvey(surveyResponse.data);
      }

      if (teamInfo === null) {
        const teamInfoResponse = await getTeamInfo(user.teamId);
        setTeamInfo(teamInfoResponse.data);
      }

      if (week === null || year === null) {
        const weekAndYearResponse = await getWeekAndYear();
        setWeek(weekAndYearResponse.data.weekNumber);
        setYear(weekAndYearResponse.data.year);
      }

      if (week && year && !stats) {
        const statsResponse = await getTeamSurveyStats(week, year, user.teamId);
        setStats(statsResponse.data);
      }
    };

    fetchData();

    return () => {
      // executed when unmount
      isMounted.current = false;
    };
  }, [survey, teamInfo, week, year, stats, user.teamId]);

我认为，检查我为每个调用的返回设置的状态值是否正确，我可以将这个http调用丢弃在一个条件中，如果该变量为null，它只会在重新呈现时发出http请求，因为我使用useState（null）定义它

当我选中“网络”选项卡时，我会看到以下内容：

第一个调用只运行一次，这是正确的-这是getSurveys 第二个调用运行两次，这是不正确的，因为只需要运行一次-这是getTeamInfo 第三个调用运行了5次，这很奇怪，因为只需要运行一次-这是getWeekAndYear 第四个调用只运行一次，这是正确的

有人知道为什么这些电话中有两个在运行几次吗？

---

谢谢

每当数组中传递的某些值发生更改时，都会调用

useffect

钩子。

---

在

调查

更改后，它将被第二次调用，但此时未加载

时间信息

，因此请求将被复制，这将对其他变量发生。这里也回答了这个问题。

每次数组的任何变量（作为第二个参数传递）都会调用useffect

尝试以下代码

useEffect(() => {       
    isMounted.current = true;

    const fetchData = async () => {
      if (survey === null) {
        const surveyResponse = await getSurveys('standard');
        setSurvey(surveyResponse.data);
        return;
      }

      if (teamInfo === null) {
        const teamInfoResponse = await getTeamInfo(user.teamId);
        setTeamInfo(teamInfoResponse.data);
        return;
      }

      let weekAndYearResponse = {};
      if (week === null || year === null) {
        weekAndYearResponse = await getWeekAndYear();
        setWeek(weekAndYearResponse.data.weekNumber);
        setYear(weekAndYearResponse.data.year);
      }

      if (weekAndYearResponse.data.weekNumber && weekAndYearResponse.year && !stats) {
        const statsResponse = await getTeamSurveyStats(weekAndYearResponse.data.weekNumber, weekAndYearResponse.year, user.teamId);
        setStats(statsResponse.data);
      }
    };

    fetchData();

    return () => {
      // executed when unmount
      isMounted.current = false;
    };
  }, [user.teamId]);

---

我将尝试引导您了解前两次调用中发生的情况，以便您能够推断其余调用中发生的情况

首次加载仪表板元素时，

useffect

运行代码。具体来说，它运行此函数

fetchData

fetchData

看到

survey

为空并运行以下代码：

const surveyResponse = await getSurveys('standard');
setSurvey(surveyResponse.data);

当该代码调用

setSurvey（surveyResponse.data）时

并更新状态变量，我假设它是

survey

，

useffect

再次运行。在完成最初的装载运行之前，它会这样做。现在管道中有2个

fetchData

调用，其中一个部分完成。我们称他们为第一和第二

第一个现在位于该块，可能正在等待

getTeamInfo

调用：

const teamInfoResponse = await getTeamInfo(user.teamId);
setTeamInfo(teamInfoResponse.data);

与此同时，第二个团队突然进入并进入同一代码块（因为

survey

不再为空，但

teamInfo

仍然为空）。所以现在第1个和第2个都在运行

constsurveyresponse=wait-getSurveys（'standard'）

因此，这两个函数调用了
getTeamInfo

那么这个,

setTeamInfo(teamInfoResponse.data);

触发另一个useEffect运行，这一次是因为
teamInfo
已更新。我想你明白了…
嗨，是的，这完全有道理。在使用Angular 7年多之后，我只使用了React 9个月，所以挂钩对我来说是比较新的。我以为在设置第一个状态变量后调用了rerender，原来的useEffect调用就被取消了！