javascript - ReactJS-setState Axios POST响应

我正在尝试为Axios POST响应设置状态，但是我映射数据的数组仍然为空。数据获取工作良好，但是我只需要将所有带有'subject'关键字的数据移到我的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之前的控制台代码段：



我应该使用其他功能代替箭头功能吗？

最佳答案

如果没有得到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);。如果是这样，请验证其为空数组。

关于javascript - ReactJS-setState Axios POST响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49516309/