Итерировать данные в строках таблицы - PullRequest
Новая
       64

Итерировать данные в строках таблицы

0 голосов
/ 04 августа 2020

У меня есть таблица данных, в которой я должен показать информацию в строке таблицы. В userDetails он содержит информацию о пользователе. В чем моя проблема: когда я повторяю tableData, я получаю всю информацию, полученную во всех строках, вместо получения 1 данных в 1 строке. Ниже представлена ​​структура ответа: 

[
    {
        "info": "Ron",
        "address": "NY",
        "id": "2113",
        "date": "2015-10-10",
    },
    {
        "info": "Mark",
        "address": "mt@ibm.com",
        "id": "3323",
        "date": "2019-01-10",
    },
]
const tableData = (
    <>
    <div>User Info </div>
      {userDetails.map((data) => (
        <>   
          <div>
            {data.info}
          </div>
        </>
      ))}
    </>
  );

в таблице 2 строки, мне нужна информация как «Ron» в первой строке, «Mark» во втором ряду. Во время итерации tableData я получаю Рон, Марк в 1-й строке и снова Рон, Марк во 2-й строке. Я почти уверен, что неправильно выполняю итерацию tableData, но не смог найти правильный подход. Может ли кто-нибудь мне с этим помочь.

1 Ответ

0 голосов
/ 04 августа 2020

@ Сингх - Похоже, ты все делаешь правильно. Мое единственное предложение - использовать тег table, если вы ищете макет на основе строк и столбцов. 

<table>
    <thead>
      <th>User Info</th>
    </thead>
    <tbody>
        {userDetails.map((userDetail) => (
             return (<tr>
               <td> {userDetail.info} </td>
             </tr>);
        )}
    </tbody>
</table>

Тег <tr> будет повторяющимся элементом, возвращаемым внутри функции map.

...