当使用相同的值调用 setState 时，条件重新渲染是重新渲染

Question

每次我在 isSignedIn 上调用 setState 即使值没有改变，它似乎也在重新渲染并将屏幕设置回堆栈的初始屏幕。

const {isAuthenticated, isVerified} = useAuth();
const [isSignedIn, setIsSignedIn] = useState(false);

useEffect(() => setIsSignedIn(isVerified && isAuthenticated), [isAuthenticated, isVerified]);

<NavigationContainer>
  <Root.Navigator initialRouteName={initialRouteName}>
    {!isSignedIn ? (
      <Root.Screen
        name="Auth"
        component={AuthStack}
        options={globalOptions}
      />
    ) : (
      <>
        <Root.Screen
          name="Tab"
          component={TabStack}
          options={globalOptions}
        />
      </>
    )}
  </Root.Navigator>
</NavigationContainer>

Answer 1

这可能有帮助

useEffect(() => {
  if( isVerified && isAuthenticated ){
    setIsSignedIn(true);
  }
 }, [isAuthenticated, isVerified]
);

Answer 2

想通了。我设置 isVerified 的方式有问题，它会先设置为 true 然后再设置为 false。

我的身份验证提供商中的问题代码：

function updateIsVerified(user) {
    if (attemptedLoginMethod === 'facebook') {
      setIsVerified(true);
    } else {
      setIsVerified(user?.emailVerified ?? false);
    }

在调用 updateIsVerified 之前未将 attemptedLoginMethod 设置为正确的方法。

当使用相同的值调用 setState 时，条件重新渲染是重新渲染

Conditional re-render is re-rendering when setState is called with same value

react-native

react-navigation

react-navigation-v5