ReactJS - setState Axios POST 响应

Question

我正在尝试为我的 Axios POST 响应设置一个状态，但我映射数据的数组仍然是空的。数据获取工作良好，但我只需将所有带有“主题”关键字的数据移动到我的 Todos 数组并打印出来。

到目前为止，这是我的代码；

App.js

import React, { Component } from 'react';
import axios from 'axios';
import Todos from "./Components/Todos"

class App extends Component {
  constructor(){
    super();
    this.state = {
      todos:[]
    }
  }

  // AXIOS request
  getTodos(){
    var postData = {
      "startDate": "startDate",
      "endDate": "endDate",
      "studentGroup": ["ID"]
    };
    let axiosConfig = {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': "Basic " + btoa("username" + ":" + "password")
      }
    };
    axios.post('url', postData, axiosConfig)
    .then((data) => {
      console.log(data);
      this.setState({todos: data.reservations ? data.reservations : []}, function(){
        console.log(this.state);
      })
    })
    .catch((err) => {
      console.log("Error: ", err);
    })
  }

  componentWillMount(){
    this.getTodos();
  }
  componentDidMount(){
    this.getTodos();
  }

  render() {
    return (
      <div className="App">
        <Todos todos={this.state.todos}/>
      </div>
    );
  }
}
export default App;

Todos.js

import React, { Component } from 'react';
import TodoItem from './TodoItem';

class Todos extends Component {
  render() {
    let todoItems;
    if(this.props.todos){
      todoItems = this.props.todos.map(todo => {
        return (
          <TodoItem key={todo.subject} todo={todo} />
        );
      });
    }
    return (
      <div className="Todos">
        <h3>Results:</h3>
          {todoItems}
      </div>
    );
  }
}
export default Todos;

TodoItem.js

import React, { Component } from 'react';

class TodoItem extends Component {
  render() {
    return (
      <li className="Todo">
        <strong>{this.props.todo.subject}</strong>
      </li>
    );
  }
}
export default TodoItem;

setState 之前来自控制台的片段：

我应该使用其他函数而不是箭头函数吗？

Answer 1

如果您没有收到this.setState is undefined 错误，那就有点奇怪了。您能否修复/复制下面的代码并验证是否有帮助：

import React, { Component } from 'react';
import axios from 'axios';
import Todos from "./Components/Todos"

class App extends Component {
  constructor(props){
    super(props);    // pass props to "father" constructor
    this.state = {
      todos:[]
    }
    this.getTodos = this.getTodos.bind(this);
  }

// AXIOS request
getTodos(){
  var postData = {
    "startDate": "startDate",
    "endDate": "endDate",
    "studentGroup": ["ID"]
  };
  let axiosConfig = {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': "Basic " + btoa("username" + ":" + "password")
    }
  };
  axios.post('url', postData, axiosConfig)
  .then((response) => {
    if(response.data.reservations) {
      this.setState({todos: response.data.reservations})
    }
  })
  .catch((err) => {
    console.log("Error: ", err);
  })
}

  componentDidMount(){
    this.getTodos();
  }

  render() {
    console.log(this.state.todos);
    return (
      <div className="App">
        <Todos todos={this.state.todos}/>
      </div>
    );
  }
}
export default App;

现在观察在请求完成后是否调用了console.log(this.state.todos);。如果是，请验证它是一个空数组。

Answer 2

在函数中创建自引用

getTodos(){
    var self = this; // create a this reference
    var postData = { .. };
    let axiosConfig = {... };
    axios.post(..)
        .then((data) => {
             self.setState('your updated state')
           }) 
        .catch((err) => {});

}

Answer 3

我很难处理未定义的“this”。我是这样解决的（调用函数应该是箭头函数）：

 handleGenerateCharge =(event) => {
        const header = new Headers();
        header.append('Access-Control-Allow-Origin', '*');  

        var charge = {
            name: "ABC",
            createDate: Moment(Date.now()).format()
        }

        axios.post("http://url", charge, header)
            .then((res) => {
                if (res.status === 200) {
                    this.update();
                }
            }).catch((error) => {
                this.setState({ errorMessage: error });
            })
        event.preventDefault();
    }