Question

我目前正在一个项目中，我的React应用程序连接到我自己的api。我遇到了一个似乎无法克服的问题。当我尝试更新数据时，出现错误，提示map不是函数。

这是我的vehicleOverview.js脚本，应该可以显示所有可用数据的列表，直到我更新数据元素后，它才能正常工作。

export class VehicleOverview extends React.Component{
constructor(props){
    super(props);

    this.state= {
        vehicles: [],
    }
    getAll().then((response) => {
        console.log(response.message);

        this.setState({
          vehicles: response.message,
        });

      }).catch((error) => {
        console.error(error);
      });
}
render(){
    return(
        <div >
        <h2>Vehicle List</h2>
        <ul >
        {    
          this.state.vehicles.map((vehicle, i) => {
             return(
            <Vehicle key={`vehicle-${i}`} {...vehicle} />);
          })     
        }
        </ul>
        </div>

    );
}
}
export default VehicleOverview;

我不确定出了什么问题，因为我很确定车辆是一个数组。告诉我是否需要提供更多代码来解决此问题

Answer 1

我在这里注意到两件事：

不建议在构造函数中使用this.setState，因为尚未呈现组件。
始终从componentDidMount进行api调用-出于本article

还以防万一，在通过车辆循环之前添加条件。

import React from 'react';

export class VehicleOverview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      vehicles: []
    };
  }

  componentDidMount() {
    getAll().then((response) => {
      console.log(response.message);
      this.setState({
        vehicles: response.message
      });
    }).catch((error) => {
      console.error(error);
    });
  }

  render() {
    return (
      <div >
        <h2>Vehicle List</h2>
        <ul>
          {this.state.vehicles && this.state.vehicles.map((vehicle, i) => (<Vehicle key={`vehicle-${i}`} {...vehicle} />))}
        </ul>
      </div>

    );
  }
}
export default VehicleOverview;

Answer 2

.map（）函数仅适用于数组数据。检查您得到的响应类型。

更新API数据后，React错误.map（）不是函数

2 个答案: