React Table отображает данные некорректно - PullRequest
Новая
       55

React Table отображает данные некорректно

0 голосов
/ 01 марта 2020

Я получаю данные следующим образом. Хотя я хочу, чтобы данные строк и столбцов обменивались друг с другом, т. Е. Я хочу, чтобы возраст клиента, 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>)    
   }

enter image description here

Пример данных ответа 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"
        ]
    }
]

1 Ответ

1 голос
/ 01 марта 2020

Вы пытаетесь отобразить каждого пользователя в отдельном столбце. Вот небольшой рабочий код и поле: 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>
...