React.js中state值为undefined问题：读取后端存入的post属性报错

• 初始State类型不匹配：你给post的初始值是数组[]，但从你访问.component、.name属性的用法，以及接口赋值res.data.Post的逻辑来看，接口返回的Post是对象类型。数组本身不存在这些自定义属性，首次渲染时读取自然返回undefined。
• 异步请求时序问题：useEffect回调会在组件首次渲染完成后才执行，也就是说你发起接口请求时，组件已经跑完了顶层的代码逻辑，此时post还是初始值，自然读不到属性。且setPost是异步更新，就算接口请求快速返回，也要等下一次重渲染才会更新post的值，首次渲染必然拿不到接口返回的数据。

1. 修正初始State的类型
   若接口返回的Post为对象类型，将初始值改为null或者空对象{}，更推荐用null方便后续判断加载状态：

// 修改前
const [post, setPost] = useState([]);
// 修改后
const [post, setPost] = useState(null);

2. 加访问容错和加载判断
   访问属性前先判断post是否已被赋值，或者直接用可选链运算符做兼容：

// 写法1：可选链兼容，post不存在时返回undefined不会报错
const component = post?.component;

// 写法2：加加载状态判断，交互更友好
if (!post) {
  return <div>数据加载中...</div>
}
// 走到这里post已经有值，直接访问属性即可
const component = post.component;

3. 若需要监听post的更新做逻辑处理，单独写依赖post的useEffect：

useEffect(() => {
  // post有值时再执行相关逻辑
  if (post) {
    console.log(post.component);
    // 其他和post相关的业务逻辑
  }
}, [post])

内容的提问来源于stack exchange，提问作者MR_HACK