使用 Material UI 映射数组

Question

不确定在使用 Material UI 表时从 axios 调用映射对象时是否有特殊规则？？

   const tableRows = this.props.reduxState.map(row => {
   const {item_description, purchase_date, item_price, item_link} ={TableRowColumn}
      return (
       <Table>
        <TableHeader>
         <TableRow>
          <TableHeaderColumn>Item Description</TableHeaderColumn>
          <TableHeaderColumn>Date of purchase</TableHeaderColumn>
          <TableHeaderColumn>Item Price</TableHeaderColumn>
          <TableHeaderColumn>Link to item</TableHeaderColumn>
         </TableRow>
        </TableHeader>
        <TableBody>
    <TableRow>
    <TableRowColumn>{{item_description}}</TableRowColumn>
    <TableRowColumn>{purchase_date}</TableRowColumn>
    <TableRowColumn>{item_price}</TableRowColumn>
    <TableRowColumn>{item_link}</TableRowColumn>
      </TableRow>
        </TableBody>
   </Table>

    );
  });

Answer 1

我已将您的代码格式化为可迭代的方式，

GetRows(){

const tableRows = this.props.reduxState.map(row => {
   const {item_description, purchase_date, item_price, item_link} ={row}
      return (
        <TableRow>
        <TableRowColumn>{{item_description}}</TableRowColumn>
        <TableRowColumn>{purchase_date}</TableRowColumn>
        <TableRowColumn>{item_price}</TableRowColumn>
        <TableRowColumn>{item_link}</TableRowColumn>
        </TableRow>
    );
  });
  return tableRows;
}
  .......

  render(){
  return(
        <Table>
        <TableHeader>
         <TableRow>
          <TableHeaderColumn>Item Description</TableHeaderColumn>
          <TableHeaderColumn>Date of purchase</TableHeaderColumn>
          <TableHeaderColumn>Item Price</TableHeaderColumn>
          <TableHeaderColumn>Link to item</TableHeaderColumn>
         </TableRow>
        </TableHeader>
        <TableBody>
        <this.GetRows/>
        </TableBody>
   </Table>
  )

  }