Question

此处的React Noob的

位，而这个逃逸了我，所以在此先感谢您很可能很容易解决的问题。

我要做的就是设置课程组件的状态，以从我的API中获取数组。我正在很好地访问数据，并且向我显示了控制台中四个对象的数组，但是状态根本不会改变。我想念什么？

在有人问我为什么不使用Redux之前，这是因为我想首先了解基础知识。

import React, { Component } from 'react';
// import axios from 'axios';
import $ from 'jquery';

class CourseIndex extends Component {
  constructor(){
    super();

    this.state = {
      courses: []
    }
  }

  componentWillMount(){
    this.getCourses();
  }

  componentDidMount(){
    this.getCourses();
  }

  getCourses(){
// ============================ jquery()================================

    $.ajax(({
      url:'/courses',
      headers: {
        "Authorization": localStorage.getItem('id_token')
      },
      dataType: 'json',
      cache: false,
      success: function(data){
        this.setState({
          courses: data
        })
      }.bind(this),
      error: function(xhr, status, err){
        console.log(err);
      }
    }))

    console.log(this.state);

// ============================ fetch()================================
    // fetch(
    //   '/courses',
    //   {
    //     headers: {
    //       "Authorization": localStorage.getItem('id_token')
    //     }
    //   })
    //   .then((res) => res.json())
    //   .then((data) => {
    //     this.setState({
    //       courses: data
    //     },console.log(this.state))
    //   });

    // ============================ axios()================================

    // axios
    //   .get(
    //     '/courses',
    //     {
    //       headers: {
    //         "Authorization": localStorage.getItem('id_token')
    //       }
    //     }
    //   )
    //   // .then(res => console.log(res.data))
    //   .then(res =>
    //     this.setState({
    //       courses: res
    //     }, console.log(this.state))
    //   )
    //   .catch(err => console.log(err));

    // console.log(this.state.courses);

    // const items = this.courses.map(res => (
    //   <li className="list-group-item">
    //     <h3>{ res.name }</h3>
    //   </li>
    // ))
  }

  render () {
    return (
      <div>
      </div>
    )
  }
}

export default CourseIndex;

对不起，注释掉的代码-我只是在尝试不同的调用模块。

谢谢

Answer 1

$.ajax是异步的，因此您无法在请求完成之前记录状态，并期望状态已更改。 setState本身也是异步的，因此，如果要在状态更改后记录状态，可以使用setState的第二个参数，它是一个回调函数。您目前正在立即调用console.log，但是您想提供一个将被调用的函数。

$.ajax({
  url: "/courses",
  headers: {
    Authorization: localStorage.getItem("id_token")
  },
  dataType: "json",
  cache: false,
  success: function(data) {
    this.setState(
      {
        courses: data
      },
      () => console.log(this.state)
    );
  }.bind(this),
  error: function(xhr, status, err) {
    console.log(err);
  }
});

无法设置状态-尝试使用Axios，AJAX和fetch（）

1 个答案: