錯誤：重新渲染過多。 React 限制了渲染的數量以防止無限循環。 內部使用效果

Question

從 API 獲取數據后，在掛鈎中設置數據時出現太多重新渲染錯誤。 在線 setCustomData(formData);

起初我認為這是因為重新渲染和 useEffect 被多次調用，但我為此包含了空數組，以便 useEffect 只渲染一次。

所以我不確定這里出了什么問題。 我將衷心感謝您的幫助。

const [numOfApplications, setNumOfApplications] = useState(0);
const [customData, setCustomData] = useState();
React.useEffect(() => {
    if (props.user.attributes["custom:role"] !== "Parent") {
      const campusId = props.user.attributes["custom:campusId"];
      const orgId = props.user.attributes["custom:orgId"];
      fetchCampusDetails(orgId, campusId)
        .then((res) => {
          console.log("result for campus details");
          console.log(res.data.customData);
          const formData = JSON.parse(res.data.customData.formData);
          setCustomData(formData);
          getAllCampusAnalytics(campusId)
            .then((result) => {
              const data = result.data.classes.all;
              const numOfApps = data.total - data.Draft;
              setNumOfApplications(numOfApps);
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    }
    if (props.user.attributes["custom:role"] === "Parent") {
      if (!localStorage.getItem("orgList"))
        getAllCampus().then((res: any) => {
          console.log(res);
          res.data.map(async (menu: any) => {
            const name = menu.orgName.replace(/\s/g, "_");
            const formDataUrl = JSON.parse(
              menu.campusList[0].customData.formData
            );
            const formData = await schoolForm(name, formDataUrl);
            if (cookie.type) {
              localStorage.setItem("type", cookie.type);
            } else localStorage.setItem("type", "1");
          });
          setOrganisationList(res.data);
          localStorage.setItem("orgList", JSON.stringify(res.data));
          if (
            cookie.school &&
            res.data.filter((org: any) => {
              if (org.orgName === cookie.school.replace(/_/g, " ")) return org;
              else return null;
            }).length === 0
          )
            removeCookie("school", {path: "/"});
        });
    }
  }, []);

Answer 1

首先，您應該將 api 調用移動到它們自己的 function 中，然后從 useEffect 中調用 function。

它重新渲染的原因可能與父級有關。 如果父母重新渲染，孩子也會重新渲染，除非你使用備忘錄或類似的東西。 沒有看到父代碼很難說。