react 17.0.1 object.entries 創建動態表

Question

下面是 object：

[
{
    "Sno": "1",
    "First Name": "name",
    "Last Name": "las2t name",
    "Email": "test@gmail.com",
    "Amount": "2000"
},
{
    "Sno": "2",
    "First Name": "first name",
    "Last Name": "last name",
    "Email": "test2@gmail.com",
    "Amount": "2000"
}
]

這是我以表格格式呈現它的代碼

{Object.entries(schedule).map(([key,value]) => {
    return(
         <Table>
             <thead style={{ background: '#8b8498' }}>
                 <tr>
                     <th>{key}</th>
                 </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>{key[value]}</td>
                  </tr>
              </tbody>
          </Table>
      )
})}

如何動態渲染帶有鍵值對的數組？？？

Answer 1

Object.entries(schedule).map(([key,value])...誠然，這是一種遍歷基本對象數組的非正統方式，但因為這就是你開始它的方式，並且沒有要求不同的方法，這是我將如何呈現您的表格：

      <table>
        <thead style={{ background: "#8b8498" }}>
          <tr>
            {Object.keys(schedule[0]).map((j, i) => (
              <td key={i}>{j}</td>
            ))}
          </tr>
        </thead>
        <tbody>
          {Object.entries(schedule).map(([key, value]) => {
            return (
              <tr>
                {Object.values(value).map((j, i) => (
                  <td key={i}>{j}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>

沙盒：https://codesandbox.io/s/mystifying-pine-nhj4o?file=/src/App.js

Answer 2

您可以在 map 的幫助下單獨渲染標題並連續渲染每個項目。

 const myArray = [ { "Sno": "1", "First Name": "name", "Last Name": "las2t name", "Email": "test@gmail.com", "Amount": "2000" }, { "Sno": "2", "First Name": "first name", "Last Name": "last name", "Email": "test2@gmail.com", "Amount": "2000" } ] const headers = Object.keys(myArray[0]); return ( <Table> <thead style={{ background: '#8b8498' }}> <tr> {headers.map((key) => ( <th>{key}</th> ))} </tr> </thead> <tbody> {myArray.map((item) => { <tr> <td>{item['Sno']}</td> <td>{item['First Name']}</td> <td>{item['Last Name']}</td> <td>{item['Email']}</td> <td>{item['Amount']}</td> </tr> })} </tbody> </Table> )

其他使用鍵渲染的方式。

const headers = Object.keys(myArray[0]);

    return (
        <Table>
            <thead style={{ background: '#8b8498' }}>
                <tr>
                    {headers.map((key) => (
                        <th>{key}</th>
                    ))}
                </tr>
             </thead>
             <tbody>
                {myArray.map((item) => {
                    <tr>
                        {headers.map((key) => (
                            <td>{item[key]}</td>
                        ))}
                    </tr>
                })}
             </tbody>
         </Table>
     )

Answer 3

在這種情況下，假設數組中的每個 object 具有相同的鍵，其中 schedule 是您示例中的數組：

const headKeys = Object.keys(schedule[0]);

return (
  <Table>
    <thead style={{ background: '#8b8498' }}>
      <tr>
        {headKeys.map((key, index) => {
          return <th key={index}>{key}</th>;
        })}
      </tr>
    </thead>
    <tbody>
      {schedule.map((item, index) => {
        return (
          <tr>
            {headKeys.map((key, index) => {
              return <td key={index}>{item[key]}</td>;
            })}
          </tr>
        );
      })}
      <tr>
        <td>{item[value]}</td>
      </tr>
    </tbody>
  </Table>
);