状态更改后，React不会重新呈现虚拟DOM

Question

I have a component that loads courses from RESTful API. After the courses have been loaded state is changed and the component should render CourseCard components with the loaded data.

The problem is that when loadCourses() method changes the state of the component no CourseCard is displayed

This is code of the component:

class Courses extends Component {

  constructor() {
    super();

    this.state = {
      courses: []
    };
  }

  componentDidMount() {
    this.loadCourses(null);
  }

  render() {
    return (
      <div>
        <CourseCategoriesBar loadCourses={this.loadCourses.bind(this)} />

        <div style={{
          paddingBottom: "120px",
          marginBottom: "30px",
        }}>
          <div className="container">
            <div className="row">

              {this.state.courses.map((course, i) => {
                return (
                  <div className="col-lg-3 col-md-6 col-sm-12" key={i}>
                    <CourseCard type="e" key={i}/>
                  </div>
                );
              })}

            </div>
          </div>
        </div>
      </div>
    );
  }

  loadCourses(id) {
    if (!id) id = ""
    let url = "http://localhost:8000/api/courses/category/" + id;

    fetch(url)
      .then((response) => response.json())
      .then((response) => this.setState(response));  
  }
}

Answer 1

I believe you are not updating state, update the state like this

fetch(url)
  .then((response) => response.json())
  .then((response) => this.setState({courses : response.data});  

Answer 2

My guess would be that your fetch response is an array, not an object.

Which means you will have a state object with properties 0,1,2 etc (like any array) instead of 'courses'.

try to map your response to the courses attribute:

.then(response => this.setState({courses: response}))