错误：太多重新呈现,React限制呈现的数量以防止无限循环,如何防止for useStates？

dba5bblo 于 2022-12-14 发布在 React

关注(0)|答案(3)|浏览(114)

我在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;

怎么解决这边的问题？

react-native

来源：https://stackoverflow.com/questions/74690775/error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent-an-inf

3条答案

按热度按时间

hs1ihplo1#

React之所以称为'React'是因为组件被设计为对状态更改'React'（重新呈现）。因此，在实践中，您正在执行以下操作：
1.渲染堆栈
1.假设if_token为true，则更改堆栈的状态
1.由于React会在状态更改时重新呈现，因此请重复步骤1和2
只要if_token的值没有改变，这种情况就会一直持续下去。React很聪明，它不会在无限循环中冻结，而是抛出一个错误，通知您可能存在一个无限循环。
正如在其他帖子中提到的，带依赖项的useEffect是实现您正在尝试做的事情的好方法。

赞(0）回复(0）举报 2022-12-14

zynd9foi2#

以下内容可能会有所帮助

useEffect(() => {
   if (if_token){
      SetTokenExist(true);
   }
 }, []);

赞(0）回复(0）举报 2022-12-14

mftmpeh83#

您将需要在useEffect中处理函数调用，其中您将执行如下操作：

useEffect(() => {
  if(token){
    someFunction()
  }
}, []}

如果在someFunction中设置了任意状态，但仍会导致重新呈现，则应将someFunction与useCallback一起使用：

const someFunction = useCallback(() => {
  // someFunction stuff!!!
}, [])

赞(0）回复(0）举报 2022-12-14

我来回答

错误：太多重新呈现,React限制呈现的数量以防止无限循环,如何防止for useStates？

3条答案

相关问题

热门标签

最新问答