Question

我有一个项目需要在用户为空时显示注册模态，它有时会起作用？？

我问一个状态元素，如果用户存在，然后显示模态，问题是当用户登录时，当显示页面时，有时会显示注册模态，

喜欢它呈现然后检查是否 user === null

这是我的问题吗？

注意：在其他选项卡上，这工作正常，就像它有更多时间来加载状态？

const mapStateToProps = ({ firebase, navigation }) => ({
  firebase,
})

function Feed ({ feed, firebase }) {

  React.useEffect(
    () => navigation.addListener('focus', () => 
      {    
        console.log("aki:: ",firebase.user)
        if (firebase.user === null) {

          //SHOW MODAL TO INVITE REGISTER
          setVisible(true),
          navigation.dispatch(navigateToBrowse())

        } else {
          setVisible(false)
        }
      }
    ),
    []
  );

Answer 1

这可能是因为在呈现此组件之前未设置 firebase.user 属性。不看父组件就无法判断。

您可以阻止树渲染，直到 firebase.user 存在。

否则，您必须区分 1. auth 正在加载，2. auth 完成加载并且用户不存在，以及 3. auth 完成加载并且用户存在。

我最初认为这是因为您处理导航副作用的方式，所以无论如何这里是代码：

function Feed({ feed, firebase }) {
  const [visible, setVisible] = useState<boolean>(false);

  React.useEffect(() => {
    const checkForUser = () => {
      setVisible(firebase.user === null);
    }

    // Check for user on all focus events
    navigation.addListener('focus', checkForUser);

    // Also check for user immediately
    checkForUser();
  }, []);

  React.useEffect(() => {
    // Only navigate away when visible gets turned on
    if (visible) navigation.dispatch(navigateToBrowse());
  }, [visible])
}

反应原生 mapStateToProps 和 React.useEffect 渲染问题

1 个答案: