React中如何解决this.state.products.map is not a function报错

报错原因 #

map是仅数组可用的方法，该报错说明你调用map时的this.state.products不是数组类型。你初始化时products为数组，但是请求接口后赋值的response.data不符合预期的数组格式。

解决步骤 #

• 第一步：先确认接口返回的实际结构
  在axios回调中打印返回值，确认response.data的格式：

  componentDidMount(){
      axios.get('http://localhost/scandiweb-test/src/backend/list.php')
      .then(response => {
          console.log('接口返回数据：', response.data)
          // 若接口将列表嵌套在返回体字段中，取对应字段即可，比如response.data.data、response.data.list
          this.setState({ products: response.data});
      })
      .catch(function (error) {
          console.log(error);
      })
  }
  

• 第二步：适配伪数组格式的返回值
  你预期的返回结构是键为数字索引的对象{0: Object {...},1: Object {...}}，这种属于伪数组，用Object.values即可转成标准数组：

  this.setState({ 
    products: Object.values(response.data)
  })
  

• 第三步：添加类型兜底，避免异常报错
  赋值前先判断返回值是否为数组，就算接口返回异常也不会触发报错：

  this.setState({ 
    products: Array.isArray(response.data) ? response.data : [] 
  })
  

  也可以在渲染前加一层判断：

  usersList(){
      if(!Array.isArray(this.state.products)) return null
      return this.state.products.map(function(object, i){
          return <RecordList obj={object} key={i}/>;
      });
  }
  

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