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

标签： javascriptreactjsaxios