我如何在 React 中用 map 迭代这个 json 来渲染它

Question

我正在尝试迭代这个 JSON，以便我可以制作一个表格，但是由于有很多标题和很多数据，我怎么能不这样做。

 const BBDDCustomer = {
      ui_labels: {
        name: 'Name',
        address: 'address',
        postalCode: 'Postal Code',
        city: 'City',
        country: 'Country',
        telephone: 'Telephone',
        email: 'Email',
        modified: 'Modified',
        delete: 'Delete'

      },
  data: [
    {
      name: 'n1',
      address: 'a1',
      postalCode: 'PC 1',
      city: 'c 1',
      country: 'cou 1',
      telephone: 'tel 1',
      email: 'em 1'
    }
}

我不必这样写：

<table striped bordered condensed hover responsive>
      <thead>
       <tr>
         <th>{BBDDCustomer.ui_labels.name}</th>
         <th>{BBDDCustomer.ui_labels.address}</th>
         <th>{BBDDCustomer.ui_labels.postalCode}</th>
         <th>{BBDDCustomer.ui_labels.city}</th>
         <th>{BBDDCustomer.ui_labels.country}</th>
         <th>{BBDDCustomer.ui_labels.telephone}</th>
         <th>{BBDDCustomer.ui_labels.email}</th>
         <th>{BBDDCustomer.ui_labels.modified}</th>
         <th>{BBDDCustomer.ui_labels.delete}</th>
       </tr>  
</table> 

Answer 1

你需要按照你想要的顺序枚举属性

const columns = ['name', 'address', ...];

并使用map

<Table striped bordered condensed hover responsive>
      <thead>
       <tr>
           {
             columns.map(column => (
              <th key={column}>{BBDDCustomer.ui_labels[column]}</th>
            ))
           }
       </tr>
      </thead>
      <tbody>
        {
          BBDDCustomer.data.map((data, i) =>(
           <tr key={i}>
               {
                 columns.map(column => (
                    <td key={column + i}>{data[column]}</td>
                 ))
               }
           </tr>
          ))
        }
      </tbody>
</Table>