ReactJS - setState Axios POST 响应

Posted 2023-02-22

【中文标题】ReactJS - setState Axios POST 响应

【英文标题】：ReactJS - setState Axios POST response

【发布时间】：2018-09-06 01:33:04

【问题描述】：

我正在尝试为我的 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 之前来自控制台的片段：

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

【参考方案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);。如果是，请验证它是一个空数组。

【讨论】：

是的，它被调用并且它是一个空数组。

你能再验证一次if(data.reservations) console.log(data.reservations) 不会记录一个空数组吗？

是的，控制台日志中没有任何内容。

@IlariM 你的意思是它记录一个空数组或者它不记录任何东西？

它不记录任何东西。

【参考方案2】：

在函数中创建自引用

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

【参考方案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();