React Native中JSON嵌套遍历异常求助：无法遍历内部数组

我来帮你分析下你遇到的问题，主要有两个核心原因：

1. setState是异步操作，不能立即依赖更新后的state #

React的setState不会立刻修改组件的state，而是把更新请求加入队列，等下一次组件渲染时才会真正更新state。所以你在调用setState之后马上循环this.state.cols_of_sel_tab，此时拿到的要么是更新前的旧值，要么后续操作逻辑没匹配正确的数据结构。

2. 对返回的JSON数据结构理解有误 #

你的解析后的数据parsedData是一个数组，里面的元素是对象，具体结构是：

[{table_cols: ["id","stud_name","stud_school"]}]

你之前的代码直接把这个对象（this.state.cols_of_sel_tab[i]）当成数组来处理，而对象没有length属性，所以内部for循环的条件j < cols.length永远不成立，循环自然不会执行；当你改用forEach时，对象本身没有forEach方法，就会抛出Cannot read property 'forEach' of undefined的错误。

正确的解决方案 #

方式一：直接使用解析后的parsedData（推荐） #

既然你刚完成JSON解析，parsedData是最新的可用数据，完全不需要等到state更新就可以直接处理：

console.log("Response is: " + resp._bodyText);
let parsedData = JSON.parse(resp._bodyText);
// 提取真正需要遍历的数组：table_cols对应的内容
const tableColumns = parsedData[0].table_cols;
// 遍历输出每个元素
tableColumns.forEach(col => {
  console.log(col); // 会依次输出 id, stud_name, stud_school
});
// 最后再更新state，用于后续组件渲染
this.setState({
  ...this.state,
  cols_of_sel_tab: parsedData
});

方式二：使用setState的回调函数（必须在state更新后操作时用） #

如果你需要在state完全更新后再执行遍历操作，可以利用setState的第二个参数（回调函数），这个函数会在state更新完成、组件重新渲染后触发：

console.log("Response is: " + resp._bodyText);
let parsedData = JSON.parse(resp._bodyText);
this.setState({
  ...this.state,
  cols_of_sel_tab: parsedData
}, () => {
  // 这里state已经更新完成
  const targetObject = this.state.cols_of_sel_tab[0];
  const tableColumns = targetObject.table_cols;
  tableColumns.forEach(col => {
    console.log(col); // 依次输出 id, stud_name, stud_school
  });
});

额外注意点 #

• 处理API返回的数据时，建议用console.log(JSON.stringify(parsedData, null, 2))格式化输出，能更清晰地看到数据的层级结构，避免结构误解。
• 永远记住setState的异步特性，不要在调用它之后立刻读取this.state，如果必须依赖更新后的state，就用回调函数或者componentDidUpdate生命周期钩子（类组件）。

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