React.js报错：Uncaught TypeError: response.data.posts不可迭代问题

错误原因 #

你尝试用扩展运算符...展开response.data.posts，但从API返回结构能看到，response.data.posts是一个分页对象，并非可迭代的数组。真正的帖子数据数组在这个对象的data属性里，直接对对象使用扩展运算符就会触发迭代错误。

修复代码 #

修改状态更新逻辑，提取分页对象里的data数组再与旧状态合并：

const [posts, setPosts] = useState([]); // 状态定义

// 正确的数据合并方式
setPosts((prev) => [...prev, ...response.data.posts.data]);

额外说明 #

如果你的API返回的顶层数据就是这个分页对象（即response.data直接等于上述的posts对象），可以进一步简化代码：

setPosts((prev) => [...prev, ...response.data.data]);

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