陣營：麻煩的setState在componentWillMount

我試圖在componentWillMount數據讀取服務器端渲染時警告：陣營：麻煩的setState在componentWillMount

警告：的setState（...）：只能更新安裝組件。這通常意味着您在服務器上的componentWillMount（）之外調用setState（）。這是一個沒有操作。

這裏的代碼片段：

async fetchProductsSSR() { 
    var response = await fetch(BACKEND_URL + '/products/', { 
     method: 'GET', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
    }); 

    var result = false; 
    var data = await response.json(); 
    console.log(response.status); 

    if (response.status === 200) { 
    } 
    else { 
     data = []; 
    } 
    return data; 
    } 

    async componentWillMount() { 
    if (!process.browser) { 
     var data = await this.fetchProductsSSR(); 
     this.setState({ 
     product_data: data 
     }); 
    } 
    }

我敢肯定，數據是正確的之前調用this.setState。

如果硬編碼的JSON數據，一切都很好

async componentWillMount() { 
    if (!process.browser) { 
    // var data = await this.fetchProductsSSR(); 

     var data = [ 
     { 
     "name": "Test", 
     } 
     ] 

     this.setState({ 
     product_data: data 
     }); 
    } 
    }

我不知道什麼是錯的，請指點，謝謝。

來源

2017-10-07 winxp1981

爲什麼你不使ajax調用componentDidMount？你必須知道建議在componentDidMount方法中發出ajax請求，因爲this.setState將重新渲染組件，並且如果在componentWillMount中創建ajax請求，則組件不會呈現，並且不會有任何更新。 –

上述評論是正確的，但要解決您的問題，只需在定義數據時執行setState，即if（data）this.setState（{product_data：data}）'。這確保你不會嘗試將狀態爲 –

的未定義值設置爲@Kenji，在componentWillMount中獲取數據的原因是服務器端呈現。提交給用戶時，我需要準備好整個頁面。 – winxp1981

我賢治的評論同意...你要做的是，在ComponentDidMount ...

https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class

，如果你想顯示加載信息，您可以設置負載狀態和使用條件渲染功能，如...

constructor(){ 
    this.state={loading:true} 
} 
ComponentDidMount(){ 
//do your async thing and change the state to loading:false 
} 
render(){ 
    if(this.state.loading) 
    return <YourMessage /> 

    return <Something /> 
}

來源

2017-10-07 03:38:33

陣營：麻煩的setState在componentWillMount

回答

相關問題