React调用API GET请求后对响应数组执行map方法返回异常问题求助

核心错误原因 #

你写的Array.map()回调函数参数顺序完全颠倒了，这是导致遍历输出全是数字的直接原因：

• JavaScript中数组map方法的回调参数固定顺序为(当前遍历元素, 索引下标, 原数组)
• 你在TableList.js中写的是data.map((index, teamData) => {})，相当于把第一个参数（实际是球队数据）命名为了index，第二个参数（实际是索引下标）命名为了teamData，所以你传给TableCard的data本质是遍历的索引值，才会输出0,1,2...的数字序列。

其他报错补充说明 #

你遇到的'[[Object Object][Object Object]]'格式问题和JSON.stringify()不生效的问题，本质是调试时错误把对象直接和字符串拼接（比如console.log('数据：' + 响应对象)），会自动调用对象的toString()方法输出[Object Object]，和接口返回格式本身无关，你之前的接口请求逻辑是正常的。

修复代码 #

修改TableList.js中的map遍历逻辑即可：

// 修正前
// {data.map((index, teamData) => {
//   return <TableCard key={index} data={teamData} />;
// })} 

// 修正后
{data.map((teamData, index) => {
  return <TableCard key={index} data={teamData} />;
})} 

如果要避免接口请求失败/数据返回结构异常导致map调用报错，可以加一层数组校验：

{Array.isArray(data) ? data.map((teamData, index) => {
  return <TableCard key={index} data={teamData} />;
}) : null}

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