使用react和materialui映射状态

Question

我正在尝试使用state将数据输出到各自的表列中。我在每个州的密钥中都有数据（rentalsData，driversData，vehiclesData）。什么是有效地将每个关键状态映射到列中的最佳方法？

export default class TableExampleControlled extends Component {
  state = {
    rentalsData: [],
    driversData: [],
    vehiclesData: [],
  };

  componentDidMount() {
    Promise.all([rentals(), drivers(), vehicles()])
    .then(result => {
      const [ rentalsData, driversData, vehiclesData ] = result;
      this.setState({ rentalsData,driversData, vehiclesData });  
    });
  };
  render() {     
    const tableRow = this.state.rentalsData.map((data) =>
      <TableBody displayRowCheckbox={false}>
        <TableRowColumn key={data.status}>{data.status}</TableRowColumn>
        <TableRowColumn key={data.vehicle}>{data.vehicle}</TableRowColumn>
        <TableRowColumn key={data.driver}>{data.driver}</TableRowColumn>
        <TableRowColumn key={data.email}>{data.email}</TableRowColumn>        
        <TableRowColumn key={data.start_date}>{data.start_date}
        </TableRowColumn>
        <TableRowColumn key={data.end_date}>{data.end_date}</TableRowColumn>
        <TableRowColumn key={data.rate}>{data.rate}</TableRowColumn>
      </TableBody>
    );

    return (
      <Table onRowSelection={this.handleRowSelection}>
        <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
          <TableRow>
            <TableHeaderColumn>Status</TableHeaderColumn>
            <TableHeaderColumn>Vehicle</TableHeaderColumn>
            <TableHeaderColumn>Driver</TableHeaderColumn>
            <TableHeaderColumn>Email</TableHeaderColumn>
            <TableHeaderColumn>Start</TableHeaderColumn>
            <TableHeaderColumn>Return</TableHeaderColumn>
            <TableHeaderColumn>Rate</TableHeaderColumn>            
          </TableRow>
        </TableHeader>
        <TableBody displayRowCheckbox={false}>
          {tableRow}
        </TableBody>
      </Table>
    );
  }
}