将数据映射到ReactJS中的表

Question

我已经从我的API中成功检索了数据并将该数据设置为setOfAllBooks状态。我想将setOfAllBooks中的数据映射到组件内的。页面加载的标题正确，但是我的数据不存在。我认为mmy map（）函数应该有问题。

import React, { Component } from 'react';
import './ViewAll.css';
import axios from 'axios'
const rootURL = 'http://localhost:5000';

const TableRow = ({ row }) => (
    <tr class="table-light">
        <th scope="row" key={row.title}>{row.title}</th>
        <td key={row.author}>{row.author}</td>
        <td key={row.isbn}>{row.isbn}</td>
        <td key={row.isbn}>24</td>
    </tr>
)

const Table = ({data}) => (
    <table class="table table-hover">
        <thead>
            <tr class="table-primary">
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">ISBN</th>
                <th scope="col">No. Of Copies</th>
            </tr>
        </thead>
        <tbody>
            {data.map(row => {
                <TableRow row={row} />
            })}
        </tbody>
    </table>

)
class ViewAll extends Component {
    constructor(props){
        super(props);

        this.state = {
            setOfAllBooks: []
        }
    }

    componentDidMount(){
        axios.get(`${rootURL}/api/book/viewAll`)
            .then(res => {
                this.setState({ setOfAllBooks: res.data });
                console.log(this.state.setOfAllBooks)
            })
    }

    render(){
        return(          
            <div>
                <Table data={this.state.setOfAllBooks} />       
            </div>
        )
    }
}

export default ViewAll;