状態を元の値に戻す

Question

実際に私は質問する必要がありますが、主なものは、変更を発行した後、setStateを作成するためにcomponentWillMount内でキャッチして、その状態を以前の値に戻す方法です。私は、componentDidMountにsetStateを書き込もうとしましたが、最大スタック呼び出しをスローします。

また、UIにmdlを使用しています。コンポーネント間を移動すると、materialSnackbar関数のようないくつかの機能が動作しなくなることに気付きました。私はそれが私が反応ルータを使用しているという事実と関係があるかどうかわかりません。これらの機能を使用しているこれらのコンポーネントはprops.childrenです

Answer 1

コンポーネントの状態を元に戻したい場合は巻き戻すために親コンポーネントに格納する必要があります。現在、バニラの反応では、コンポーネントの内部状態を他のどこかで追跡しないで巻き戻す方法はありません。

はそうあなたが見ることができるよう、私たちは親コンポーネントの状態を保存する必要があると私たちは子供を経由して制御することができインデックス経由でアクセスしたいあなたは、以下のコンポーネント

class ParentComponent extends React.Component { 
    getInitialState() { 
     return({ 
      stateHistory: [ 
          { name: "foo" }, 
          { name: "bar" } 
          { name: "baz" } 
          ], 
      stateHistoryIndex: 0 
     }) 
    }, 

    onRewind() { 
     this.setState({ 
      stateHistoryIndex: this.state.stateHistoryIndex += 1 
     }); 
    }, 

    render() { 
     return(
      <div> 
      <ChildComponent 
       data={this.state.stateHistory[this.state.stateHistoryIndex]} 
        handleRewind={this.onRewind} 
       /> 
      </div> 
     ) 
    } 
} 

class ChildComponent extends React.Component { 
    render() { 
     return(
      <div> 
       Hi, my name is {this.props.data.name} 
       <button onClick={() => this.props.handleRewind()}>Rewind</button> 
      </div> 
     ) 
    } 
} 

を持って言うことができます。