Question

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

当前，我正在使用for循环遍历数组，但是改用.map Javascript函数会更好。

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

当我尝试用map函数替换循环时，似乎代码尝试在定义数组之前映射数组。该数组是通过Redux reducer的promise调用定义的。因此，在App将数组设置为状态之前，代码将调用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循环可能导致表呈现两次或三次。

Answer 1

props.users的初始状态是什么？为了清楚起见，应将其初始化为空数组。很难说出没有错误。

我要尝试的第二件事是通过将props.users封装在Array.from（this.props.users）中来确保它是一个数组。

第三件事可能是使用template literals，而不是创建元素并在创建后向其中添加属性，这可以帮助您的代码看起来更整洁。因此，您不必动态遍历和创建元素，而只需动态地进行操作即可。

Array.from(this.props.users).map(user => {
   return (
      `<tr key=${user.id} id=${user.id}>
        <td>${user.name}</td> // or whatever info your trying to display 
      </tr>`
   )
})

如何使用React JS遍历MongoDB数组以呈现表？

1 个答案: