Question

所以我正在尝试做出反应的api调用（这是第一次，我对React不熟悉）并且它不是那么顺利。所以下面发生的是我将一个变量传递给handlepony函数，然后通过axios调用将其发送到我的后端（在express中）。将其放入api字符串的url中，然后返回并设置ponyArray。所有这一切都很好。我的console.log“这是ponyArray里面的handle”“显示了我期待的回报。

这是问题所在。我的this.state.ponyArray和这个console.log都返回undefined，我无法设置它们。它可能是一个异步性问题，或者可能是因为我不能正确地调用构造函数。这是我尝试的第一段代码。

handlePony(feeling){

    console.log("inside App. and my feeling is ", feeling);

    this.setState({
      feeling: feeling,
      ponyArray: []
    }, function(){

        let ponyArray = this.state.ponyArray;

        axios.post('http://localhost:5000/User/ponys', {
          feeling: this.state.feeling
        })
          .then(function(response){
            let jsonobj = JSON.parse(response.data.body)
            console.log("pony return ok ", jsonobj);
            let keyindex = 0;
            jsonobj.faces.forEach(function(face){

                ponyArray.unshift({
                  image: face.image,
                  key: keyindex
                });
                keyindex+=1;

            });
            console.log("this is ponyArray inside handlepony ", ponyArray);
            console.log("this 'this' after ponyArray", this);
          })
          .catch(function(error){
            console.error("error from pony", error);
          });
    });
  }

或者，不是将初始设置状态作为承诺，而是尝试在其他所有内容完成后设置状态。我遇到了同样的问题 - console.log（this）返回undefined，设置状态似乎没有运行（控制台日志甚至没有返回）。如果这是一个范围问题我会认为我必须以某种方式将它绑定到axios.post方法，我不知道该怎么做（也似乎hacky）。

handlePony(feeling){

    let ponyArray = [];

    axios.post('http://localhost:5000/User/ponys', {
      feeling:feeling
    })
      .then(function(response){
        let jsonobj = JSON.parse(response.data.body);
        console.log('pony returned ok ', jsonobj);
        let keyindex = 0;
        jsonobj.faces.forEach(function(face){

            ponyArray.unshift({
              image: face.image,
              key: keyindex
            });
            keyindex+=1;

        });

        console.log('this', this);

        this.setState({
          ponyArray: ponyArray
        }, function(){
            console.log('ponyArray', ponyArray);
            console.log('this.state.ponyArray', this.state.ponyArray);
        });

      })
      .catch(function(error){
          console.error(error);
      });
  }

我们非常感谢能给予的任何帮助。在我认为应该是一个微不足道的ajax api电话时，我面临着这么大的困难，这似乎很奇怪。我想我知道问题是什么（或许），所以任何可以提供的代码片段都是最有用的。谢谢！

PS如果它有助于我包含哈滕滨。

示例1：https://hastebin.com/ewoyupuvon.js

示例2：https://hastebin.com/vuroqeniyu.js

Answer 1

this需要绑定到您的React组件。现在，this绑定到Axio对象。使用arrow修复此.then((response) =>

handlePony(feeling){

    let ponyArray = [];

    axios.post('http://localhost:5000/User/ponys', {
      feeling:feeling
    })

      .then((response) => { // Arrow function to bind this with your Component

        let jsonobj = JSON.parse(response.data.body);
        console.log('pony returned ok ', jsonobj);
        let keyindex = 0;
        jsonobj.faces.forEach(function(face){

            ponyArray.unshift({
              image: face.image,
              key: keyindex
            });
            keyindex+=1;

        });

        console.log('this', this);

        this.setState({
          ponyArray: ponyArray
        }, function(){
            console.log('ponyArray', ponyArray);
            console.log('this.state.ponyArray', this.state.ponyArray);
        });

      })
      .catch(function(error){
          console.error(error);
      });
  }

您也可以使用.bind(this));或：

let ponyArray = [];
const self = this;

self.setState({})
self.state.ponyArray

Answer 2

你不能只改变ponyArray（你的第一个解决方案），因为反应不会知道变化，也不会重新渲染。

使用第二个解决方案+箭头函数保持this的相同值：

.then(response => {
  // ...
})

React，Set.state（）和API调用问题

2 个答案: