错误：重新渲染太多。 React 限制渲染次数以防止无限循环。如何防止使用状态？答案

【问题标题】：Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. How to prevent for useStates?错误：重新渲染太多。 React 限制渲染次数以防止无限循环。如何防止使用状态？
【发布时间】：2022-12-06 03:40:17
【问题描述】：

我在 bare react native 中像这样定义我的令牌检查。我收到错误：太多的重新渲染。 React 限制渲染次数以防止无限循环。

const Stack = createNativeStackNavigator();
function App() {
  
  const [tokenExist, SetTokenExist] = useState(false);
  const if_token = getBurgerToken();
  if (if_token){
  SetTokenExist(true);
  }


  return (
    <NavigationContainer>
      <Stack.Navigator>

        {tokenExist ? (
          <>
            <Stack.Screen name="Home">
              {(props) => <HomeScreen {...props} Istoken={tokenExist} />}
            </Stack.Screen>
          </>
        ) : (
          <>
            <Stack.Screen name="Login">
              {(props) => <LoginScreen {...props} extraData={SetTokenExist} />}
            </Stack.Screen>
          </>
        )
        }



      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

如何解决这里的问题？

【问题讨论】：

将 getBurgerToken 函数调用、有条件地检查令牌和状态设置移动到 useEffect 挂钩中。

标签： react-native react-hooks

【解决方案1】：

在 useEffect 中添加 if 条件并设置依赖

【讨论】：

【解决方案2】：

React 被称为“React”的原因是因为组件被设计为“反应”（重新渲染）状态变化。因此，实际上，您正在执行以下操作：

渲染堆栈
假设 if_token 为真，改变 Stack 的状态
因为 React 在状态改变时重新渲染，所以重复步骤 1 和 2
只要 if_token 的值不变，这将永远持续下去。 React 很聪明，它不仅会冻结在无限循环中，还会抛出一个错误，通知您可能存在无限循环。

正如在其他帖子中提到的，useEffect with dependencies 是实现你想要做的事情的好方法。

【讨论】：