Table 在 ReactJS 中出现两次

Question

我正在尝试在 ReactJS 中创建一个 table 并使用 API 数据在其中输入行。列是固定的。但不知何故，出现了两个 table 并且数据在它们中被分割。

<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} 给出了两个名字，每个 table 显示一个名字。

Answer 1

出现两个 table 是因为您正在地图函数中渲染整个 table。尝试只渲染需要根据数据生成的 rows/columns：

              <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>

Table 在 ReactJS 中出现两次

Table in ReactJS appearing twice

datatable

html-table

reactjs

react-table