如何在反应中设置来自axios的响应状态

Posted 2023-02-21

【中文标题】如何在反应中设置来自axios的响应状态

【英文标题】：How to set state of response from axios in react

【发布时间】：2017-05-02 20:50:24

【问题描述】：

如何在 axios 中设置 get 响应的状态？

axios.get(response)
    this.setState(events: response.data)

【参考方案1】：

这里有语法错误。你应该试试这个

var self = this;
axios.get('/url')
 .then(function (response) 
   console.log(response);
   self.setState(events: response.data)
 )
.catch(function (error) 
   console.log(error);
);
//the rest of the code
var a = 'i might be executed before the server responds'

这里有几点需要注意：

axios.get 是一个异步函数，这意味着其余的代码将被执行。当服务器的响应到达时，传递给then 的函数将被执行。 axios.get('url') 的返回值称为 promise 对象。你可以阅读more about it here this 关键字具有不同的值，具体取决于调用它的位置。 this.setState中的this

应该

指的是构造函数对象，而当你在函数内部调用this时，它指的是window对象。这就是我将this 分配给变量self 的原因。你可以阅读more about this here

专业提示：

如果你使用 ES6，你会想要使用箭头函数（它们没有自己的 this）并使用 this.setState 而不将 this 分配给变量。 more about it here

    axios.get('/url')
     .then((response) => 
       console.log(response);
       this.setState(events: response.data)
     )
    .catch((error)=>
       console.log(error);
    );

这是一个完整的示例https://codesandbox.io/s/rm4pyq9m0o，其中包含最佳实践，通常用于获取数据，包括错误处理、重试和加载。这提供了更好的用户体验。我们鼓励您修改代码并进行尝试以获取更多关于它的见解。

【讨论】：

您好，我知道我来不及回复，但这个答案为我节省了大量时间和精力。谢谢

无法弄清楚我的代码出了什么问题，幸运的是我偶然发现了这个答案。谢谢！

【参考方案2】：

这不起作用，因为“this”在 axios 内部是不同的。 axios 中的“this”指的是 axios 对象，而不是你的 react 组件。你可以用 .bind 解决这个问题

还有 axios 没有被正确使用。

它应该看起来像

axios.get("/yourURL").then(function(response) 
  this.setState( events: response.data );
.bind(this));

或者，如果使用 es6，您可以将函数替换为箭头函数，并在不绑定的情况下获得相同的效果

axios.get("/yourURL").then(response => 
  this.setState( events: response.data );
);

【参考方案3】：

试试这个节点js

      axios.get(`https://jsonplaceholder.typicode.com/users`)
       .then(res => 
          const persons = res.data;
          this.setState( persons );
      )

如果你使用 react js 那么你首先导入组件而不是使用 axios

像这样：

import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component 
  state = 
    persons: []
  

  componentDidMount() 
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => 
        const persons = res.data;
        this.setState( persons );
      )
  

  render() 
    return (
      <ul>
         this.state.persons.map(person => <li>person.name</li>)
      </ul>
    )
  

【参考方案4】：

当我学习 React 时，我处理过类似于过去的承诺。我所做的是将 api 调用放在 componentDidMount 方法上并将状态设置为初始值。我在获取数据时使用了加载器。

componentDidMount() 
 const self = this;
 axios.get(response)
  self.setState( events: response.data );

到目前为止，我会使用类似于 checkenrode 所说的内容。

【参考方案5】：

做这样的事情：

  var self= this; // self will now be referred to your component

  axios.get("http://localhost:3001/get_user?id=" + id)
  .then(function (response) 
    if(response.data.rows != null)
    user_detail = response.data.rows;
    console.log(response);
    self.setState(email: user_detail.name, name: user_detail.name)
  )