javascript - 表头是否重复自身 react 成分？

这是我在react类中的render方法。数据正常发送，但标头重复自身。

如何安排该块以正确的格式呈现表格？

现在这里看起来如何

我只希望显示一次标题。

render() {
    return (


        <div>
          {
            this.state.data.map((dynamicData, Key) => {
              let keys = Object.keys(dynamicData);
              let d = dynamicData;
              return keys.map(data => {
                return (
                  <div style={{ border: '1px solid black' }}>

                    <table id="emp" border="1" class="table">
                       <thead class="thead-dark">
                      <tr>
                        <th>#</th>
                        <th>Company</th>
                        <th>UserId</th>
                        <th>Role</th>
                        <th>Email</th>
                        <th>Desc</th>
                        <th>Contact</th>
                        <th>Password</th>
                        <th>Action</th>
                      </tr>
                    </thead>
                      <tbody >
                        <tr>
                          <td>{dynamicData[data].employee_id}</td>
                          <td>{dynamicData[data].first_name}</td>
                          <td>{dynamicData[data].last_name}</td>
                          <td>{dynamicData[data].email}</td>
                          <td>{dynamicData[data].phone_number}</td>
                          <td>{dynamicData[data].hire_date}</td>
                          <td>{dynamicData[data].salary}</td>
                          {/* <td>{dynamicData[data].department.department_name}</td> */}
                          <td><button value={dynamicData[data].employee_id} onClick={this.editClick}
                            className="btn  btn-primary btn-sm">Edit </button> &nbsp;&nbsp;
                             <button value={dynamicData[data].employee_id} onClick={this.handleClick}
                              className="btn  btn-danger btn-sm">Delete </button></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                );
              });
            })

          }
        </div>
    );
  }

最佳答案

不要在map()函数中使用标头进行迭代

          <tbody >
          {this.state.data.map((dynamicData, Key) => {
              let keys = Object.keys(dynamicData);
              let d = dynamicData;
              return keys.map(data => {
                return (
                  <div style={{ border: '1px solid black' }}>
                        <tr>
                          <td>{dynamicData[data].employee_id}</td>
                          <td>{dynamicData[data].first_name}</td>
                          <td>{dynamicData[data].last_name}</td>
                          <td>{dynamicData[data].email}</td>
                          <td>{dynamicData[data].phone_number}</td>
                          <td>{dynamicData[data].hire_date}</td>
                          <td>{dynamicData[data].salary}</td>
                          {/* <td>{dynamicData[data].department.department_name}</td> */}
                          <td><button value={dynamicData[data].employee_id} onClick={this.editClick}
                            className="btn  btn-primary btn-sm">Edit </button> &nbsp;&nbsp;
                             <button value={dynamicData[data].employee_id} onClick={this.handleClick}
                              className="btn  btn-danger btn-sm">Delete </button></td>
                        </tr>
                  </div>
                );
              });
            })}
           </tbody>