Таблица в ReactJS появляется дважды - PullRequest
Новая
       0

Таблица в ReactJS появляется дважды

1 голос
/ 26 февраля 2020

enter image description here Я пытаюсь создать таблицу в ReactJS и ввести в нее строки, используя данные API. Коломны исправлены. Но каким-то образом появляются две таблицы, и данные разделяются в обеих из них. 

<React.Fragment>
    {error ? <p>{error.message}</p> : null}
    {!isLoading ? (
      users.map(user => {
        const { name, owner } = user;
        return (
          <table class="table table-bordered table-secondary" id="tableBorder">
        <thead style={{backgroundColor:"#3787d8",color:"white"}}>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
          </tr>
        </thead>
        <td>{FullName}</td>          
        </table>
        );
      })
    ) : (
      <h3>Loading...</h3>
    )}
  </React.Fragment>

{FullName} дает два имени, по одному в каждой таблице.

1 Ответ

2 голосов
/ 26 февраля 2020

Появляются две таблицы, потому что вы отображаете всю таблицу в функции карты. Попробуйте просто отрисовать строки / столбцы, которые должны быть созданы для данных: 

              <React.Fragment>
                {error ? <p>{error.message}</p> : null}
                {!isLoading ? (
                <table class="table table-bordered table-secondary" id="tableBorder">
                <thead style={{backgroundColor:"#3787d8",color:"white"}}>
                  <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Email</th>
                  </tr>
                </thead>
                {
                    users.map(user => {
                    const { name, owner } = user;
                    return (
                        <td>{FullName}</td>  
                    );
                    })
                }
                </table>
            ) : (
              <h3>Loading...</h3>
            )}
            </React.Fragment>
...