反应表数据显示不正确

Question

我以以下方式获取数据。虽然我想交换行和列数据，即我希望“客户年龄”，“年龄”列下的“客户年龄”，CRM和41562434等。下面是我的表格代码：

    {!isLoading ? (
     
<table class="table table-bordered table-secondary" id="tableBorder">
     
       <thead class="first">{
     users.map(user => {
   const { featureName} = user; 
   return (
<th style={{ color: "black" }}>{featureName}</th> 
        );
      })     
     } </thead>
     <>
     {
      users.map(user => {
    const { featureTechDescription, sourceSystem, sampleValues} = user; 
    return (
<>
 <tr><td>{featureTechDescription}</td>
  <td>{sourceSystem}</td> 
 <td>{sampleValues}</td></tr>  
</>
         );        
       })   }</>    
      </table>
      ) : (<h3>Loading...</h3>)    
   }

我尝试使用的json响应的样本数据：---

[
    {
        "featureName": "Age",
        "featureTechDescription": "Customer Age in Whole Months",
        "sourceSystem": "CRM",
        "sampleValues": [
            "41",
            "56",
            "24",
            "34"
        ]
    },
    {
        "featureName": "Martial Status",
        "featureTechDescription": "Marital status of borrower",
        "sourceSystem": "CRM",
        "sampleValues": [
            "Married",
            "Single",
            "Divorced",
            "Not Disclosed"
        ]
    },
    {
        "featureName": "Customer Since",
        "featureTechDescription": "Date of start of relationship between bank and borrower",
        "sourceSystem": "CRM",
        "sampleValues": [
            "1/10/2015"
        ]
    }
]

Answer 1

您正在尝试将每个用户显示在其自己的列上。这是一个小的工作代码框：https://codesandbox.io/s/xenodochial-dawn-qn6io

如果您在反应中进行映射，请不要忘记为每个用户使用key。

      <table className="table table-bordered table-secondary" id="tableBorder">
        <thead className="first">
          <tr>
            {users.map(user => (
              <th key={user.featureName} style={{ color: "black" }}>
                {user.featureName}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {["featureTechDescription", "sourceSystem", "sampleValues"].map(
            key => (
              <tr key={key}>
                {users.map(user => (
                  <td key={user.featureName}>{user[key]}</td>
                ))}
              </tr>
            )
          )}
        </tbody>
      </table>