React渲染列表时报错tweetsData.map is not a function

报错本质是状态tweetsData的类型在更新后从数组变成了普通对象，对象原型上不存在数组的.map方法，因此抛出类型错误。
你初始值设置为空数组的写法没有问题，问题出在接口请求成功后的状态更新逻辑：

// 错误写法：传入的是{}包裹的普通对象
setTweetsData({
  posts,
  ...posts,
});

执行这段代码后，tweetsData不再是数组，而是一个包含posts字段、同时展开了posts所有属性的普通对象，自然无法调用数组方法。
另外代码中还存在两个会引发异常的细节问题：

• setTweetsData是异步批更新的，紧跟在后面写console.log(tweetsData)无法拿到刚更新的状态值，打印的永远是更新前的旧值
• return的JSX结构缺少<main>开标签，会触发语法编译错误

1. 修正状态更新逻辑，直接将接口返回的posts数组赋值给tweetsData，不要额外包裹对象：

// 替换原有错误的setTweetsData代码
setTweetsData(posts);

为了兼容后端可能返回非数组格式的异常场景，可以加一层类型兜底：

setTweetsData(Array.isArray(posts) ? posts : []);

2. 结合已有的isLoading状态加渲染判断，避免数据加载完成前的渲染异常：

return (
  <main>
    {isLoading ? (
      <div>内容加载中</div>
    ) : (
      tweetsData.map((post) => {
        return (
          <div className="main-view__user-feed">
            {/* 保留你原有的单条推文渲染内容即可 */}
          </div>
        )
      })
    )}
  </main>
)

3. 补全缺失的<main>根开标签，保证JSX结构合法。

修复后可在渲染前打印tweetsData的类型，控制台输出true即代表类型正确，.map方法可正常执行：

console.log(Array.isArray(tweetsData))

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