时间戳

首页 > 解决方案 > 反应原生 mapStateToProps 和 React.useEffect 渲染问题

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

问题描述

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

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

喜欢它呈现，然后检查 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)
        }
      }
    ),
    []
  );

标签： reactjsreact-nativestatereact-props

解决方案

这可能是因为 firebase.user 在渲染该组件之前没有设置 prop。没有看到父组件就无法判断。

您可以阻止树渲染，直到 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])
}

推荐阅读