在Superagent請求上更改狀態

Question

我試圖在'superagent'的請求中更改我的狀態，但console.log的結果是未定義的。大家可以幫我嗎？

componentDidMount(){ 

    var self = this; 

    Request.get('https://api.navitia.io/v1/coverage/fr-idf/stop_areas/stop_area%3AOIF%3ASA%3A59491/departures?') 
     .auth('******') 
     .end(function(err, res){ 
      if(err){ 
       return err; 
      } 
      let departures = res.body.departures; 
      self.setState({body: departures}); 
     }); 
    console.log(this.state.departures); 
} 

Answer 1

setState是usually asynchronous，雖然它可以在某些情況下，是同步的（如名爲react上下文之外 - 例如，如果傳遞的setState到非反應DOM節點/功能）。在這種情況下，它被異步設置，並與其他狀態更新進行批處理，這些更新可能會在相同的刻度/幀中進行。例如，如果您在componentWillUpdate或componentDidUpdate（但僅在下一個勾號）中記錄this.state.departures，則會在那裏看到您的價值。即使您將控制檯語句放入setTimeout(console.log(...), 100)，您也可能無法獲得undefined。

或者，如果您需要根據該值採取行動並且無法或不想使用生命週期方法，則可以使用回調調用setState，如下所示：setState((state) => return mutatedState)。您將永遠不會在回調中收到陳舊狀態，例如按順序呼叫setState將始終按預期行事。

Answer 2

兩件事情：

1. 您沒有設置depatures狀態，但body狀態。
2. setState可以是異步的，所以最好把它的回調放入日誌中。

試試這個：

componentDidMount() { 
    const self = this; 

    Request.get('https://api.navitia.io/v1/coverage/fr-idf/stop_areas/stop_area%3AOIF%3ASA%3A59491/departures?') 
    .auth('******') 
    .end(function(err, res){ 
     if(err) return err; 
     let departures = res.body.departures; 
     self.setState({ departures }); 
    },() => console.log(this.state.departures)); 
}