React项目中state存储接口返回数据后报array map is not a function错误

核心原因 #

报错的本质是调用map方法的list变量不是数组类型，map是数组专属原型方法，对象、undefined等非数组类型调用时就会抛出该错误。 #

分步排查解决 #

1. 检查state中list的初始值 #

90%以上的该类问题都是初始值设置错误导致的：

• 如果你把list的初始值设为了{}（空对象）、undefined或者其他非数组类型：第一次渲染时接口还没返回数据，render里的list?判断只会过滤undefined和null，空对象属于真值，会直接进入map逻辑触发报错。
• 你把判断改为list.length > 0?后报错消失的原因也很简单：空对象没有length属性，取值为undefined，undefined > 0结果为假，直接走了null分支，所以不会报错也不会渲染任何内容。
  解决方案：将state里list的初始值设置为空数组[]即可。

2. 校验接口返回字段的类型 #

即使初始值设置正确，也有可能因为接口返回异常导致问题：比如接口报错时返回的response字段是对象格式的错误提示，你直接赋值给list同样会触发报错。
解决方案：赋值前增加数组类型判断，修改componentDidMount里的赋值逻辑：

componentDidMount() {
  axios.get(`${process.env.REACT_APP_DEV_URL}/admins/playlist_admin`, {
    headers: {
      'Authorization': this.state.token
    }
  })
  .then((res) => {
    const resList = res.data.response;
    // 仅当返回值为数组时才赋值，否则设为空数组
    this.setState({ list: Array.isArray(resList) ? resList : [] });
  })
}

3. 优化渲染层的判断逻辑 #

可以在渲染层增加更严谨的判断，避免边界情况报错，修改render里的判断条件：

{
  Array.isArray(list) && list.length ? 
    list.map((playlist, index) => (
      <tr key={index}>
        <td>{playlist.id}</td>
        <td>{playlist.name}</td>
        <td>{playlist.songs.length}</td>
      </tr>
    ))
  : null
}

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