コンポーネントのコンストラクタで状態を設定できないのはなぜですか？

Question

私はコード全体でただ一つのthis.setStateコールしか持っていません。それはコンストラクタにありますが、まだsetStateというエラーが出ています。

私はわかりやすくするために、次のコードにそれを縮小しました：次のようにエラーがある

import React, { Component } from 'react'; 

class App extends Component { 
    constructor() { 
    super(); 
    this.setState({ 
     hello: 'nothing' 
    }); 
    } 

    render() { 
    return (
     <div></div> 
    ); 
    } 
} 

export default App; 

：

proxyConsole.js:56警告：setState(...)：専用でマウントや実装部品を更新することができます。これは通常、マウントされていないコンポーネントでsetState()と呼ばれていたことを意味します。これはノーオペレーションです。 Appコンポーネントのコードを確認してください。

なぜこのようなことが起こり、どのようにコンストラクタで状態を設定できますか？

Answer 1

コンポーネントの作成時に初期状態を設定する場合は、this.stateを直接設定してください。this.setStateは使用しないでください。 setStateは、コンポーネントがマウントされている場合にのみ使用でき、コンストラクタではではなくがマウントされているため、状態を直接設定します。 the React documentationあたり：それがマウントされる前に、

constructor()

constructor(props)

リアクトコンポーネントのコンストラクタが呼び出されます。 [...]

コンストラクタは状態を初期化するのに適した場所です。状態を初期化せずにメソッドをバインドしない場合は、Reactコンポーネントのコンストラクタを実装する必要はありません。 the React documentationパー

constructor() { 
    super(); 
    this.state = { 
    hello: 'nothing' 
    }; 
} 

：

あなたがthis.stateを割り当てることができる唯一の場所は、コンストラクタです。