Question

我试图渲染{this.state.courses.name}中的项目，但没有任何内容出现。我甚至没有在ComponentDidMount（）中的console.log的终端中获得任何东西。这只是代码永远不会到达ComponentDidMount（）的情况吗？我是React的新手所以这可能是一个简单的错误...

＆＃13;

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);

＆＃13;

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属性值正确映射状态课程。您可能希望使用数组初始化课程。此外，由于课程是一个数组，您可能也想使用地图。在下面的代码中，我创建了一个用于渲染课程的组件。

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组件中？

1 个答案: