React请求数据后在return中循环渲染内容的问题求助

问题分析 #

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

1. 初始状态post设为null，直接访问post.length会触发报错（null不存在length属性）；
2. React的JSX中无法直接用普通for循环渲染元素，因为这类循环不会返回React可识别的JSX元素集合。

修正方案 #

1. 优化初始状态

把post的初始值从null改为空数组[]，这样即使请求未完成，post也是合法数组，不会出现属性访问错误：

const [post, setPost] = React.useState([])

2. 使用数组map方法遍历渲染

在return中用map方法遍历数组，它会返回一个JSX元素数组，React可直接渲染该数组：

return (
  <div>
    {post.map((item, index) => (
      {/* 必须给每个元素添加唯一key，优先用数据自带的唯一id，无id时可用index */}
      <p key={index}>{item.name}</p>
    ))}
  </div>
)

可选：保留初始状态为null的处理方式 #

如果不想修改初始状态，可添加条件判断，确保post存在后再遍历：

return (
  <div>
    {post && post.map((item, index) => (
      <p key={index}>{item.name}</p>
    ))}
  </div>
)

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