React父组件通过props传递API数据给子组件，可打印却无法渲染

问题根因 #

你遇到的问题有两个核心原因：

1. 初始渲染阶段，父组件的posts状态是空数组[]，子组件第一次渲染时访问props.posts[0]得到的是undefined，此时直接渲染不会显示任何内容。
2. API请求完成、父组件更新posts状态后，props.posts[0]是一个包含userId、id、title、body属性的对象，React不支持直接将普通对象作为子元素渲染到页面，这就是你能在控制台打印出数据，但页面没有内容的核心原因。

解决方法 #

你需要先处理空数组的边界情况，再指定要渲染的对象具体属性即可：

方案1：仅渲染第一条文章 #

export default function ProductSection(props) {
  const classes = useStyles();
  // 空数组时展示加载状态
  if (props.posts.length === 0) {
    return <Typography>加载中...</Typography>
  }
  return (
    <div className={classes.section}>
      {/* 明确指定要渲染的对象字段，比如标题、正文 */}
      <Typography variant="h5">{props.posts[0].title}</Typography>
      <Typography variant="body1">{props.posts[0].body}</Typography>
   </div>
  );
}

你也可以用可选链语法简化边界判断，不用提前return：

<Typography variant="h5">{props.posts[0]?.title}</Typography>
<Typography variant="body1">{props.posts[0]?.body}</Typography>

方案2：渲染所有文章列表 #

如果需要渲染接口返回的全部文章，使用map方法遍历数组即可，注意遍历元素要加唯一key属性避免React告警：

export default function ProductSection(props) {
  const classes = useStyles();
  return (
    <div className={classes.section}>
      {props.posts.map(post => (
        <div key={post.id} style={{marginBottom: '20px'}}>
          <Typography variant="h5">{post.title}</Typography>
          <Typography variant="body1">{post.body}</Typography>
        </div>
      ))}
   </div>
  );
}

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