javascript - 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); 是否在请求完成后被调用。如果是，请验证它是一个空数组。