在map函数中运行axios.get返回一个promise

Question

我有一个React应用程序，可以从数据库中获取书籍ID的列表，并使用这些ID进行显示以从GoogleBooks API中获取信息。因此，我正在遍历道具，并为每本书准备使用axios.get（）获取API的方法。 我的问题是它返回一个我找不到要处理的对象的Promise。

这是我玩的错误 对象作为React子对象无效（找到：[object Promise]）。如果要渲染子级集合，请改用数组。

谢谢！

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>;
    }