ReactJS中的表出现两次

Question

我正在尝试在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}给出两个名称，每个表中都显示一个。

Answer 1

之所以出现这两个表，是因为您在map函数中渲染了整个表。尝试仅渲染将根据数据生成的行/列：

<React.Fragment>
{error ? <p>{error.message}</p> : null}
{!isLoading ? (
  users.map(user => {
    return (
      <td>{FullName}</td>       
    );
  })
) : (
  <h3>Loading...</h3>
)}

然后将其插入表格的渲染函数中。