が反応：componentWillMount

Question

で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 
     }); 
    } 
    } 

結構ですとしてくださいアドバイス、 はあなたに感謝。私は健二さんのコメントに同意

Answer 1

...あなたは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 /> 
}