如何使用ReactJS获取MongoDB值并显示在表中

Question

我正在尝试使用MongoDB从table的{​​{1}}数据库中填充数据。但是作为回报，我只得到了一个ReactJS页面，这些页面都显示在浏览器控制台中。

这就是我的html使用React来获取数据的样子

axios

这是我的import React, { Component } from "react"; import "react-datepicker/dist/react-datepicker.css"; import axio from "axios"; const ShowAssignments = (props) => ( <tr> <td>{props.assignment.assignmentName}</td> <td>{props.assignment.assignmentDescription}</td> <td>{props.assignment.courseName}</td> <td>{props.assignment.assignmentDueDate}</td> </tr> ); export default class AllAssignments extends Component { constructor(props) { super(props); this.state = { assignmentName: "", assignmentDescription: "", courseName: "", assignmentDueDate: "", allAssignments: [] }; } componentDidMount() { axio .get("http://localhost:4000/courseweb/assignments") .then(res => { this.setState({ allAssignments: res.data }); }) .catch(err => { console.log(err); }); } getRows() { return this.state.allAssignments.map((currentAssignment, id) => { return <ShowAssignments book={currentAssignment} key={id} /> }); } render() { return ( <div id="content-wrapper"> <div className="container-fluid"> <ol className="breadcrumb"> <li className="breadcrumb-item"> <a href={`/instructor/${this.props.username}`}>Home</a> </li> <li className="breadcrumb-item active">Update Assignment</li> </ol> <h1>Update Assignments</h1> <hr /> <p>Update due dates of Assignments</p> <br /> <table className="table table-striped"> <thead> <tr> <th>Assignment Name</th> <th>Assignment Description</th> <th>Course Name</th> <th>Due Date</th> <th>Action</th> </tr> </thead> <tbody>{this.getRows()}</tbody> </table> </div> </div> ); } } 处理后端。

server.js

有人可以告诉我我哪里出问题了吗？

Answer 1

使其具有防御性

制作更稳定的代码的第一步是拥有一个空状态或某种防止崩溃的保护。

此行简单的修复方法将向您显示更多信息

  getRows() {
    if (!this.state.allAssignments && !this.state.allAssignments.length) return null;
    return this.state.allAssignments.map((currentAssignment, id) => {
        return <ShowAssignments book={currentAssignment} key={id} />
    });
  }

然后创建一些日志，以查看每次重新渲染时状态下的值。

  getRows() {
    console.log(this.state);
    if (!this.state.allAssignments && !this.state.allAssignments.length) return null;
    return this.state.allAssignments.map((currentAssignment, id) => {
        return <ShowAssignments book={currentAssignment} key={id} />
    });
  }

请先执行此操作，然后查看您的状态中是否还有数据。它可能表明您需要实现生命周期方法componentDidUpdate来处理传入的数据。