React Native中useEffect内可读取currentUser但外部访问为undefined

1. React函数组件的渲染流程优先级高于useEffect回调执行，首次渲染时Redux store中currentUser还处于初始未赋值的undefined状态，JSX部分直接访问currentUser.username会直接抛出未定义错误，此时useEffect还未触发拉取用户数据的逻辑。
2. 你使用的useEffect没有声明依赖数组，会在每一次组件渲染完成后都重复执行：首次渲染完成后useEffect检测到currentUser为空，触发异步的fetchUser action；action执行完成更新Redux状态后，useSelector检测到状态变更触发组件二次渲染，此时useEffect二次执行检测到currentUser已存在，才会打印你看到的完整用户数据，但此时首次渲染的报错已经触发了。
3. 控制台打印的对象是引用类型，你看到的打印内容是点击展开时的最新值，而非打印执行瞬间的值，也会造成「打印时已经有值但渲染报错」的认知偏差。

• 给JSX访问属性增加可选链操作符避免空值报错：

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

也可以搭配条件渲染，只有currentUser存在时才渲染对应节点：

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

• 解构取值时增加默认值兜底，避免上层状态为空时报错：

const {currentUser = {}, listings = []} = currUser || {};

• 给useEffect增加正确的依赖数组，避免无效重复执行：

useEffect(() => {
  if (!currentUser) {
    dispatch(fetchUser());
  } else {
    console.log('This is the current user');
    console.log(currentUser);
  }
  dispatch(fetchUserListings());
}, [currentUser, dispatch]); // 仅依赖项变更时才执行回调

内容的提问来源于stack exchange，提问作者A. G