如何使用react js循环MongoDB数组以呈现表?

在我的MERN应用程序中,我尝试创建一个管理仪表板组件。此组件将显示一个包含用户信息的表。从MongoDB集合中提取信息,然后将其呈现到表中。

目前,我正在使用for循环迭代数组,但是使用.map javascript函数会更好。

但是,当我将下面的代码切换到.map函数而不是for循环时,它不起作用,为什么会发生这种情况对我来说毫无意义。

当我试图用map函数替换循环时,代码似乎在定义数组之前尝试映射它。数组通过redux reducer的promise调用定义。所以在应用程序将数组设置为状态之前,代码调用map函数并中断。

当我使用for循环时,出于某种不可思议的原因,它等待我的数组被设置好,然后我可以显示这个表。

对于为什么在这种情况下我不能使用.map函数,但是for循环工作得很好,有什么想法吗?下面是我的代码。

import React, { Component } from "react"
import { connect } from "react-redux"
import ReactDOM from "react-dom"
import { Table, Button, Container } from "reactstrap"

class AdminProfile extends Component {
  constructor(props) {
    super(props)
    this.renderTable = this.renderTable.bind(this)
    this.renderTableBody = this.renderTableBody.bind(this)
  }

  renderTableBody() {
    const body = document.getElementById("table-body")
    const length = this.props.users.length
    for (var i = 0; i < this.props.users.length; i++) {
      const row = document.createElement("tr")
      row.id = this.props.users[i].discord_id
      const col1 = document.createElement("td")
      col1.innerText = this.props.users[i].discord_id
      const col2 = document.createElement("td")
      col2.innerText = this.props.users[i].email
      const date = new Date(this.props.users[i].pay_date)
      date.setMonth(date.getMonth() + 1)
      const col3 = document.createElement("td")
      col3.innerText = date.toLocaleDateString()
      const col4 = document.createElement("td")
      col4.innerText = this.props.users[i].status
      const col5 = document.createElement("td")
      col5.setAttribute("name", "button-column")
      col5.style.display = "inline-block"

      const button1 = document.createElement("Button")
      const button2 = document.createElement("Button")
      const button3 = document.createElement("Button")
      //button1.style.alignSelf = "center"
      button1.setAttribute("class", "btn-icon btn-simple btn btn-info btn-sm")
      button2.setAttribute(
        "class",
        "btn-icon btn-simple btn btn-success btn-sm"
      )
      button3.setAttribute("class", "btn-icon btn-simple btn btn-danger btn-sm")
      const button1icon = document.createElement("i")
      const button2icon = document.createElement("i")
      const button3icon = document.createElement("i")
      button1icon.setAttribute("class", "fa fa-user")
      button1icon.setAttribute("color", "info")
      button1icon.setAttribute("size", "sm")
      button2icon.setAttribute("class", "fa fa-edit")
      button2icon.setAttribute("color", "success")
      button2icon.setAttribute("size", "sm")
      button3icon.setAttribute("class", "fa fa-times")
      button3icon.setAttribute("color", "danger")
      button3icon.setAttribute("size", "sm")
      button1.appendChild(button1icon)
      button2.appendChild(button2icon)
      button3.appendChild(button3icon)

      col5.appendChild(button1)
      col5.appendChild(button2)
      col5.appendChild(button3)
      row.appendChild(col1)
      row.appendChild(col2)
      row.appendChild(col3)
      row.appendChild(col4)
      row.appendChild(col5)
      body.appendChild(row)
      if (length === i) {
        break
      }
    }
    // this.renderButtons()
  }
  // renderButtons() {
  //   const rows = document.getElementsByName("button-column")
  //   for (var i = 0; i < rows.length; i++) {
  //     ReactDOM.render(
  //       <Container>
  //         <Button className="btn-icon btn-simple" color="info" size="sm">
  //           <i className="fa fa-user" />
  //         </Button>
  //         <Button className="btn-icon btn-simple" color="success" size="sm">
  //           <i className="fa fa-edit" />
  //         </Button>
  //         <Button className="btn-icon btn-simple" color="danger" size="sm">
  //           <i className="fa fa-times" />
  //         </Button>
  //       </Container>,
  //       document.querySelector(rows[i].name)
  //     )
  //   }
  // }
  renderTable() {
    console.log(this.props.users)
    return (
      <Table responsive>
        <thead>
          <tr>
            <th className="text-left">ID</th>
            <th>Email</th>
            <th>Next Payment</th>
            <th className="text-left">Status</th>
            <th className="text-left">Actions</th>
          </tr>
        </thead>
        <tbody id="table-body">{this.renderTableBody()}</tbody>
      </Table>
    )
  }
  render() {
    return (
      <div>
        <h1 style={{ textAlign: "center" }}>WELCOME ADMIN!</h1>
        <h4 style={{ textAlign: "center" }} S>
          Users
        </h4>
        {this.renderTable()}
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    auth: state.auth,
    card: state.card,
    stock: state.stock,
    users: state.users
  }
}

export default connect(mapStateToProps)(AdminProfile)

我想要的结果是更干净的代码,它可以减少错误。for循环在某些情况下可能导致表被呈现两次或三次。