如何从 mlab 将项目列表呈现到我的 React 组件中？

Question

我正在尝试渲染 {this.state.courses.name} 中的项目，但没有显示任何内容。对于 ComponentDidMount() 内的 console.log，我什至没有在终端中得到任何东西。仅仅是代码永远不会到达 ComponentDidMount() 的情况吗？我是 React 的新手，所以这可能是一个简单的错误...

import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions/';
import Cookies from 'universal-cookie';
import { Link } from 'react-router-dom';
import CourseList from '../CourseList/CourseList.js';
import axios from 'axios';
//import router from '../server/controllers/course.controller.js'
const cookies = new Cookies();

class DashboardPage extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      courses: {},
    };
    console.log(props);
  }

  componentDidMount() {
    axios.get("localhost:3001/courses")
    .then(function(response) {
      this.setState({
        courses: response.data.courses
      })
      console.log('I am getting the response from axios courses here!',response.data)
    })
  }
  render() {
    let inst = cookies.get('instructor');
    console.log('ins', inst);
    inst = inst.fullName;
    //CourseController.getAllCourses((req,res) => {
    //console.log(res.data)
    //})
    return (
      <div>
        <div className="greeting"> Welcome Back, {this.props.fullName}</div>
        <div className="addCourseLink">
          <Link to="/addCourse">Add a new course </Link>
        </div>
        <div className="dashboard-your-courses"><h2>Your Courses</h2></div>
        <div className="courseList">{this.state.courses.name}</div>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    fullName: state.auth.fullName
  };
}

export default connect(mapStateToProps, actions)(DashboardPage);

Answer 1

鉴于下面的对象是在 localhost:3000/courses

上调用 GET 的结果

{
     "courses": [{
         "_id": "5949328eafbad560ecdfba5e",
         "name": "Math 300",
         "_creator": "59360ff893dfcb1a24e0e855",
         "__v": 0
     }, {
         "_id": "59493590afbad560ecdfba5f",
         "name": "Math 300",
         "_creator": "59360ff893dfcb1a24e0e855",
         "__v": 0
     }, {
         "_id": "5949374fafbad560ecdfba60",
         "name": "English 300",
         "_creator": "59360ff893dfcb1a24e0e855",
         "__v": 0
     }]
 }

您必须确保使用上述对象（数组）中的课程值属性正确映射州课程。您可能希望使用数组来初始化课程。此外，由于 courses 是一个数组，您可能还想使用 map 。在下面的代码中，我创建了一个组件来呈现课程。

import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions/';
import Cookies from 'universal-cookie';
import { Link } from 'react-router-dom';
import CourseList from '../CourseList/CourseList.js';
import axios from 'axios';
//import router from '../server/controllers/course.controller.js'
const cookies = new Cookies();

class DashboardPage extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      courses: [],
    };
    console.log(props);
  }

  componentDidMount() {
    axios.get("localhost:3001/courses")
    .then(function(response) {
      this.setState({
        // given that response.data.courses is an object with a couse property
        courses: response.data.courses.courses
      })
      console.log('I am getting the response from axios courses here!',response.data)
    })
  }
  render() {
    let inst = cookies.get('instructor');
    console.log('ins', inst);
    inst = inst.fullName;
    //CourseController.getAllCourses((req,res) => {
    //console.log(res.data)
    //})
    
    // render your functional component here
    return <DashboardContent courses={this.state.courses} fullName={this.props.fullName} />
  }
}

// new functional component
function DashboardContent(props) {
  return (
    <div>
      {
        props.courses.map(course => {
          return <div>
            <div className="greeting"> Welcome Back, {props.fullName}</div>
            <div className="addCourseLink">
              <Link to="/addCourse">Add a new course </Link>
            </div>
            <div className="dashboard-your-courses"><h2>Your Courses</h2></div>
            <div className="courseList">{course.name}</div>
          </div>   
        }) 
      }
    </div>
  );
}

function mapStateToProps(state) {
  return {
    fullName: state.auth.fullName
  };
}

export default connect(mapStateToProps, actions)(DashboardPage);

如何从 mlab 将项目列表呈现到我的 React 组件中？

How do I render a list of items into my React Component from mlab?

reactjs

mlab