UseEffect 正确读取值，但如果在其他地方访问，则值未定义

Question

我目前在我的 react-native 项目中有以下代码：

const currUser = useSelector((state) => state.userState);
  const {currentUser, listings} = currUser;

  const dispatch = useDispatch();

  useEffect(() => {
    if (!currentUser) {
      dispatch(fetchUser());
    } else {
      console.log('This is the current user');
      console.log(currentUser);
    }
    dispatch(fetchUserListings());
  });

稍后在同一函数中有以下代码行：

<Text style={[styles.username, {width: '50%'}]}>
            @{currentUser.username}
</Text>

当我运行我的应用程序时，我收到一条错误消息说“currentUser.username”无效，因为未定义不是一个对象，但是我的控制台打印以下输出：

This is the current user
Object {
  "email": "test120@gmail.com",
  "username": "test13",
}

这意味着正在执行 useEffect 中的代码并填充 currentUser。我真的很困惑为什么我能够在 useEffect 中访问 currentUser 的值，但是我不能在 useEffect 之外做同样的事情。

Answer 1

实际情况是 currentUser 的值是 undefined 第一次，直到 API 调用执行并设置值。你在useEffect中登录的值是在取值之后，但错误发生在取值之前。

所以如果你只是让我们说这样做（如果未定义，只需分配一个空对象）：

const {currentUser = {}, listings} = currUser;

不会报错

UseEffect 正确读取值，但如果在其他地方访问，则值未定义

UseEffect reads value correctly but value is undefined if accessed elsewhere

dispatch

react-native

react-redux

react-hooks

use-effect