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

【问题标题】：react native mapStateToProps and React.useEffect render issue反应原生 mapStateToProps 和 React.useEffect 渲染问题
【发布时间】：2021-01-11 03:00:59
【问题描述】：

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

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

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

【问题讨论】：

通常在解决任何用户状态状态时会使用某种“加载”状态，这样您就不会意外呈现“无用户”或“用户”情况想要。

标签： reactjs react-native state react-props

【解决方案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])
}

【讨论】：