在React中如何提取JSON响应数据并解决map is not a function报错

报错原因 #

TypeError: valuesArray.map is not a function 报错的核心原因是你通过JSON.parse(data)得到的结果是对象类型，而map是JavaScript中数组专属的遍历方法，不能直接作用在对象上。
同时你拿到的JSON结构中，每个外层属性对应的value都是{Key, Value}格式的数组，无法直接通过u.builder这种方式读取属性，需要先做结构转换。

修复后的代码 #

const rawData = JSON.parse(data);
const users = Object.values(rawData).map(itemArray => {
  // 将[{Key: "builder", Value: "xxx"}, {Key: "account_id", Value: "xxx"}]转换为{builder: "xxx", account_id: "xxx"}格式
  const userInfo = itemArray.reduce((result, item) => {
    result[item.Key] = item.Value;
    return result;
  }, {});

  return (
    <tr key={userInfo.builder}>
      <td>{userInfo.builder}</td> 
      <td>{userInfo.account_id}</td>
    </tr>
  );
});

改动说明 #

• 用Object.values(rawData)把外层的普通对象转换成数组，解决无法调用map的问题
• 用reduce方法将每组Key/Value格式的数组，转换为可直接通过属性名读取值的普通对象，适配你后续的字段读取逻辑

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