太多的重新渲染。 React 限制了渲染的数量以防止无限循环。反应原生答案

【问题标题】：Too many re-renders. React limits the number of renders to prevent an infinite loop. react native太多的重新渲染。 React 限制了渲染的数量以防止无限循环。反应原生
【发布时间】：2021-03-25 21:47:26
【问题描述】：

当 GetCreatorLicense() 被禁用时，程序运行良好我尝试在循环外设置数据，但仍然收到“错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。错误然后我把这个函数放在useEffect下，我只是得到控制台输出但useState没有改变

        const Getdata = async () => {
            let grabbedData = [];
            await firebase
              .database()
              .ref(`/users`)
              .orderByKey()
              .on("value", (snapshot, key) => {
                // console.log('snapshot....', snapshot);
                grabbedData.push(snapshot.val());
              });
            setUserdata(grabbedData);
            //   console.log('grabbedData....', grabbedData);
          };
        
          useEffect(() => {
            Getdata();
            // GetCreatorLicense();
          }, []);
        
  React.useEffect(() => {
    GetCreatorLicense();
  }, []);

  const GetCreatorLicense = () => {
    console.log("this is a GetCreatorLicense this got printted");
    let checkDis = false;
    let checkDealer = false;
    let checkSubDis = false;
    let checkMoneyCollector = false;
    let checkfranchise = false;
    Object.keys(userdata).map(function (key) {
      console.log("I am not printed", userdata[key]);
      let x = userdata[key];
      Object.keys(x).map(function (key2) {
        console.log("I am not printed either", x[user1.uid].create.distributor);
        if (x[user1.uid].create.distributor) {
          checkDis = true;
        }
        if (x[user1.uid].create.subDistributor) {
          checkSubDis = true;
        }
        if (x[user1.uid].create.delaer) {
          checkDealer = true;
        }
        if (x[user1.uid].create.moneyCollector) {
          checkMoneyCollector = true;
        }
        if (x[user1.uid].create.franchise) {
          checkfranchise = true;
        }
      });
    });
    if (checkDis) {
      setCanCreateDistributor(true);
    }
    if (checkSubDis) {
      setCanCreateSubDistributor(true);
    }
    if (checkDealer) {
      setCanCreateDealer(true);
    }
    if (checkMoneyCollector) {
      setCanCreateMoneyCollector(true);
    }
    if (checkfranchise) {
      setCanCreateFranchise(true);
    }
  };

编辑：循环没有运行，但在零食中它工作正常。

【问题讨论】：

如果GetCreatorLicense(); 直接从功能组件主体调用并更新状态，这将触发渲染循环。能否提供更多Minimal, Complete, and Reproducible 组件代码示例？当您将GetCreatorLicense(); 放在useEffect 中时，您指的是什么控制台输出？您在验证什么/如何验证状态未更新（除了从当前渲染周期记录状态）？
这是链接snack.expo.io/@mgonekar/quiet-fudge
好的，我了解 GetCreatorLicense 更新状态，然后它重新加载调用 GetCreatorLicense 并因此循环然后我如何防止这种情况我使用 useEffect 和 useCallback 但我得到 console.log 的输出（“这是一个 GetCreatorLicense ");但状态尚未更新
您在哪里以及如何验证状态未更新？我在第 85 行的 setCanCreateDistributor(true); 中只看到一个入队状态更新，但 canCreateDistributor 的初始状态值已经是 true。
所有状态默认为假，'userdata..create..'可以是真或假，来自firebase的数据可以由其他授权用户和'key2'更新是授权登录用户的 ID

标签： reactjs react-native

【解决方案1】：

您确实在更改useEffect 中的状态。 Getdata 是从 useEffect 内部调用的，它正在调用 setUserdata，我认为这是一个 useState 函数。

您可以通过声明应该触发 useEffect 的状态变量来避免这种情况，确保这些状态不会在 useEffect 中更改。

【讨论】：