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

我试图在React组件内进行2个HTTTP调用，该组件将调用使用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之外定义了函数，并将两个状态变量传递到依赖关系数组中，该数组将被检查以防止无限重排序。 有人知道为什么这种情况还在发生吗

---

谢谢

您正在函数中设置

调查

和

团队信息

，并在

使用效果

中依赖它们

useffect

每次依赖项更改时都会运行。您正在设置它们，导致重新加载。由于它们已更改，

useffect

将再次运行，并再次设置它们。这种循环还在继续

你需要移除这些

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

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

唯一推荐的其他方法是在

useffect

中移动

async

函数，除非您需要从组件中的其他位置调用它们

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

---

依赖项数组中的状态变量导致此处呈现无限。获取它。谢谢我是新的反应（来自角度），所以对我来说都是全新的！不用担心，你需要一分钟的时间来把你的头绕在上面。我自己也处理过几个无限循环，就是这么说的。我已经按照您的建议修改了代码，但仍然存在问题：（是否还有其他原因导致此问题？是否重新生成以确保它没有运行旧代码。如果依赖项数组中没有任何内容，则它应该只运行一次。明白了！将空数组放回修复中。谢谢！