Redux Essentials教程第7章RTK Query遍历结果无预期内容报错

问题原因及解决方案 #

1. 调试代码逻辑错误 #

使用for...in遍历数组时，循环变量获取的是数组的索引（字符串类型的数字，如'0'、'1'），而非数组元素本身。你尝试读取post1.title本质是读取字符串对象的title属性，结果自然为undefined，属于调试代码的写法错误，和RTK Query返回的posts数据无关。

正确的遍历调试写法二选一即可：

• 使用for...of直接遍历数组元素：

for (const post1 of posts) {
  content += ' loop: ' + post1.toString() + ' typ: ' + typeof(post1) + ' ID: ' + post1.title + '!!';
}

• 若用for...in则通过索引取对应元素：

for (const idx in posts) {
  const post1 = posts[idx];
  content += ' loop: ' + post1.toString() + ' typ: ' + typeof(post1) + ' ID: ' + post1.title + '!!';
}

2. 原map渲染报错的常见诱因 #

2.1 未正确提取RTK Query返回数据

RTK Query的查询钩子返回结构为{ data, isSuccess, isLoading, error }，需要显式将data字段赋值给posts，同时建议设置默认空数组避免无数据时调用map报错，示例：

const { data: posts = [], isSuccess } = useGetPostsQuery()

2.2 接口返回结构适配错误

如果后端返回的数组嵌套在其他字段中（如{ code: 200, result: [posts数组] }），需要在API定义时通过transformResponse提取目标数组：

getPosts: builder.query({
  query: () => '/posts',
  transformResponse: (response) => response.result
})

3. 官方示例无法渲染的说明 #

你提到的教程配套沙箱无法渲染问题，一般是沙箱环境的接口请求限制（如跨域、mock接口限流）导致的，并非教程代码本身存在缺陷，可将示例代码拉到本地运行验证。

验证方法 #

在isSuccess为true的分支中直接打印console.log(posts[0]?.title)，如果能正常输出内容，即可确认posts数据本身是正常的，问题出在遍历或取值逻辑上。

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