React Native中useState引发重渲染过多错误的解决方法

问题根源 #

你直接在组件函数体内调用SetTokenExist(true)，每次组件渲染都会执行这段条件判断代码。而调用setState会触发组件重新渲染，这就形成了渲染→触发setState→再次渲染→再次触发setState的无限循环，最终触发React的防死循环报错。

解决方案 #

把令牌检查逻辑放到useEffect钩子中，限制它只在组件首次挂载时执行一次：

1. 先导入useEffect：

import { useState, useEffect } from 'react';

2. 修改组件内的逻辑：

const Stack = createNativeStackNavigator();
function App() {
  
  const [tokenExist, setTokenExist] = useState(false);

  useEffect(() => {
    // 组件首次挂载时检查令牌
    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;

额外说明 #

• 建议把SetTokenExist改成小驼峰命名setTokenExist，符合React的通用命名规范。
• 如果getBurgerToken是异步操作（比如从AsyncStorage读取令牌），需要改成异步函数形式：

useEffect(() => {
  async function checkToken() {
    const if_token = await getBurgerToken();
    if (if_token) {
      setTokenExist(true);
    }
  }
  checkToken();
}, []);

内容的提问来源于stack exchange，提问作者SARIM