承诺在设置状态但打印到控制台时返回未定义

Question

所以我对网络开发很陌生，但我正在尝试构建我的第一个前端应用程序，它只是从 API 获取一些数据并显示它。当我console.log()我的承诺时，它返回一个对象数组，这是我想要的，也是我对承诺的期望。但是，当我尝试将组件的状态设置为相同的承诺数组时，React 会抛出此错误：

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

以下是相关代码：

const config = {
    method: 'get',
    url: 'http://ergast.com/api/f1/2020/drivers.json',
    headers: {}
};

export default class DriverList extends Component {

    state = {
        drivers: []
    }

    componentDidMount() {
        axios(config)
            .then(res => {
                console.log(res.data.MRData.DriverTable.Drivers)
                this.setState({
                    drivers: res.data.MRData.DriverTable.Drivers // *** Error pointing to this ***
                });
                console.log(this.drivers)
            })
            .catch(err => {
                console.log(err)
            });
    }

    render() {
        return (
            <div>
                {this.state.drivers.map(driver =>
                    <Driver
                        firstName={driver.giveName}
                        lastName={driver.familyName}
                        driverID={driver.driverId}
                    />)
                }
            </div>
        )
    }
}

对此的任何帮助将不胜感激！

Answer 1

我认为没有实际数据，而是Promise。

试试这个怎么样？

componentDidMount() {
  this.getDrivers();
}

getDrivers = async () => {
  try {
    const res = await axios(config);
    const drivers = res.data.MRData.DriverTable.Drivers;
    this.setState({
      drivers
    });
  } catch (err) {
    console.log(err);
  }  
};