状態はどこで更新する必要がありますか？

Question

私はcomponentDidMount関数で状態を更新したコンポーネントを持っています。

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md

それは

componentDidMount（無ましたマウント・セット状態）でSETSTATEの

防止の使用

を言う：私は、このページに私を指摘リンターの警告を得ましたコンポーネントをマウントした後の状態を更新すると、2番目のrender（）呼び出しがトリガーされ、プロパティ/レイアウトのスラッシングが発生する可能性があります。

代わりに状態を更新する必要がありますか？

これは私のcomponentDidMount機能である：

componentDidMount(){ 
    this.interval = setInterval(() => { 
     this.setState({ 
     frame: this.state.frame + 1 
     }); 
    }, this.props.interval); 
    } 

そして、これは私の関数でレンダリングしている：実際には、あなたは、setStateを使用していない

constructor(props, context){ 
    super(props, context); 

    this.state = {frame: 1}; 
} 

Answer 1

：

私のコンストラクタをsetState、このルールを使用する非同期操作を定義しています私は同期操作setStateについて考えているので、最初のレンダリングがインターバルを開始する前になることが確実であれば、このルールをeslint configで無効にすることができます。

チェックアウトcomponentDidMountにSETSTATEを行うhttps://github.com/airbnb/javascript/issues/684#issuecomment-264094930

@ljharb から、このスレッドやコメントは、目に見えるレンダリングのフラッシュが発生します。

しかし、サーバーのレンダリングを行う場合、ブラウザー環境を必要とするものは、クライアント専用であるが、クライアントとサーバーの両方で実行されるため、componentDidMountに入れる必要があります。