React JS 無法讀取未定義的屬性“地圖”

Question

我想從api獲取數據，並將其設置為狀態，並在map中使用它進行迭代

    const result = await API.getSearch(data);

    if(result.status === 200){
        this.setState({data: result.data, loading: false })
    }

    const result = await API.getSearch(data); // got data successfully

然后：

this.state.data && this.state.data.length > 0 && this.state.data.data.map(function(value, i){

我知道這種錯誤意味着，地圖沒有得到任何數據，所以我使用了條件，首先我檢查狀態是否返回數據，然后檢查數據是否有長度，但仍然得到這個錯誤。 任何解決方案？

Answer 1

我想而不是這個

this.state.data.data.map(function(value, i){

應該只有一次數據

this.state.data.map(function(value, i){

Answer 2

看起來你還沒有初始化data 。 因此，在第一次渲染期間，它是undefined 。 在undefined ， map不存在。導致這個問題。

像下面這樣聲明和定義data

this.state = {
    data: []
}

或者

constructor(props) {
    this.state = {
        data: []
    }
}

Answer 3

使用解構獲得默認值並確保內部data是數組

 const { data : { data = [] } = {} } = { data: { data: ['foo', 'bar']} } ; console.log(data.map(x => x + "--").join());