反應，Set.state（）和API調用的問題

Question

因此，我試圖做一個API反應（第一次，我不熟悉React），它不是很好。所以下面發生的事情是，我將一個變量傳遞給handlepony函數，然後通過axios調用發送到我的後端（快速）。它被放入api字符串的url中，然後返回並設置ponyArray。所有這些工作都很好。我的console.log爲「這是ponyArray裏面handlepony」顯示我期待的回報。

這是問題所在。我的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）返回未定義和set狀態似乎不運行（控制檯日誌甚至不返回）。如果這是一個範圍問題，我會認爲我必須以某種方式將它綁定到axios.post方法，我不知道該怎麼做（也似乎很難）。

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調用中遇到了這麼大的困難。我想我知道問題是什麼（可能），所以任何可能提供的代碼片段都是最有用的。謝謝！

PS如果有幫助，我已經包括了垃圾箱。

實施例1：https://hastebin.com/ewoyupuvon.js

實施例2：https://hastebin.com/vuroqeniyu.js

Answer 1

this需要被綁定到組件作出反應。現在，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 => { 
    // ... 
})