React.js配合Axios调用GET接口获取车辆数据控制台有值页面空白求助

问题原因 #

核心问题为state属性名不匹配：

• 构造函数的初始state中，声明的存储车辆列表的属性为 cars: []
• retrieveCars 请求成功后，你将接口返回的数据赋值给了未声明的 carsList 属性
• 渲染逻辑中遍历的是始终为空的 this.state.cars，因此页面没有内容显示

修复方案 #

修改retrieveCars方法中的setState逻辑，将返回数据赋值给正确的state属性即可：

retrieveCars() {
  DataService.getAll()
  .then(response => {
    // 把carsList改为cars，和初始state、渲染逻辑的属性名保持一致
    this.setState({
      cars: response.data
    });
    console.log(response.data);
  })
  .catch(e => {
    console.log(e);
  });
}

可选优化建议 #

渲染列表时为每个<li>元素添加唯一key属性，避免React抛出列表渲染警告：

<ul className="list-group">
  {
    cars.map(data => (
      // 用车辆id作为唯一key
      <li key={data.idCars}>
        {data.carName}
      </li>
    ))
  }
</ul>

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