Javascript 在map函数中运行axios.get将返回一个承诺

我有一个React应用程序，从数据库中获取书籍ID列表，并使用这些ID显示它们，以从GoogleBooks API获取信息。因此，我正在通过我的道具进行映射，对于每本书，我将使用axios.get（）来获取API。 我的问题是，它返回了一个我找不到处理位置的对象承诺

这就是它欺骗我的错误 对象作为React子对象无效（找到：[对象承诺]）。如果要呈现子对象集合，请改用数组

谢谢

class HomeGroup extends Component {
    componentDidMount() {
        this.props.fetchBooks();
    }
    renderBooks() {
        return this.props.books.map(async (book, index) => {
            const res = await axios.get(`https://www.googleapis.com/books/v1/volumes?q=isbn:${book.ISBN}`);
            return <div key={index}>{res.data.items[0].id}</div>;
        });
        }
    render() {      
        return <div className="row">{this.renderBooks()}</div>;
    }

类家庭组扩展组件{
componentDidMount（）{
this.props.fetchBooks（）；
}
renderBooks（）{
返回此.props.books.map（异步（book，index）=>{
const res=等待axios.get(`https://www.googleapis.com/books/v1/volumes?q=isbn:${book.ISBN}`）；
返回{res.data.items[0].id}；
});
}
render（）{
返回{this.renderBooks（）}；
}

不要在渲染逻辑中发出请求。当

fetchBooks

第一个api完成同步函数

async（）=>{}

时，请将其移动到didMount或diddupdate中，并始终返回promise熟悉，然后它将与您的书籍类似。