Как перебрать таблицу с помощью Javascript?

Question

У меня есть таблица, к которой нужно динамически добавлять данные, и количество необходимых столбцов будет зависеть от количества поставщиков услуг. Я хочу перебрать tr и td таблицы, но сейчас я просто пытаюсь добавить оператор forEach в таблицу, но я получаю эту ошибку: Uncaught Invariant Violation: объекты недопустимы как дочерний элемент React (найдено: объект с ключами

Кто-нибудь знает, как это сделать с помощью React или Lodash?

          <table className='table-body'>
            <tbody>
              {
                forEach(leadServiceProviderComparison.response.assignedServiceProviders, (provider) => {
                  console.log('provider: ', provider);
                })
              }
              <tr style={{height: '65px'}}>
                  <th>Gatlin Plumbing &#38; Heatings</th>
                  <th>St. John Plumbing, Inc.</th>
                  <th>Budget Right Handyman</th>
                  <th>Plumbing Company</th>
              </tr>

Answer 1

Вы не можете использовать forEach таким образом. Если вы хотите просмотреть весь массив данных, полученных из API данных, попробуйте использовать map.

Map поддерживается во всех массивах, и для этого вам не нужен Lodash.

См. https://reactjs.org/docs/lists-and-keys.html для примеров.

Answer 2

Внутри tbody:

    {
              leadServiceProviderComparison.response.assignedServiceProviders.map((provider,index)=>return(
                 <tr key={index} style={{height: '65px'}}>
                      <th>Gatlin Plumbing &#38; Heatings</th>
                      <th>St. John Plumbing, Inc.</th>
                      <th>Budget Right Handyman</th>
                      <th>Plumbing Company</th>
                  </tr>
);)
    }