React组件props提示undefined但console.log打印正常问题求助

• 你在父组件的posts容器内，第一行直接渲染了一个未传递post属性的<Post />组件，此时Post组件接收到的post参数默认就是undefined，这是报错的直接诱因，控制台前两次undefined就是这个空Post组件输出的（如果开启了React严格模式，组件会初始渲染两次，所以会输出两次undefined）。
• 你的dataApi大概率是异步请求获取的数据，初始状态如果没有设置为空数组，首次渲染时数据还未返回，也可能引发相关渲染问题。
• 你后面能正常打印5个post对象，是因为异步请求拿到数据后触发组件重渲染，此时dataApi.map会遍历返回的5条数据，给每个Post组件传递正常的post参数，所以后续输出正常。

• 第一步：删除父组件中多余的无参数<Post />，你只需要保留dataApi.map循环渲染Post的逻辑即可，那行单独的Post代码是多余的：

// 删掉这行代码
<Post />

• 第二步：给Post组件的post参数添加兜底逻辑，避免特殊场景下post为undefined引发报错，可任选以下一种方案：
  方案1：接收props时直接设置默认值

  const Post = ({post = {}}) => {
    const {author, date_creation, message} = post
    // 后续渲染逻辑不变
  }
  

  方案2：解构时添加空值合并兜底

  const {author, date_creation, message} = post ?? {}
  

  方案3：使用可选链直接读取属性

  <Author className="post__author" author={post?.author} />
  <Date className="post__date" date={post?.date_creation} />
  <Text message={post?.message} />
  

• 第三步：确保dataApi的初始值设置为空数组，比如使用useState声明时不要留空初始值：

const [dataApi, setDataApi] = useState([])

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