reactJS説明するのは少し難しかった新たな状態VARにオブジェクトをコピーしたり、ツリー

Question

でタイトルを状態を渡す...ここに私がやっているものです....

私は当たっている反応のアプリを持っていますAPIを呼び出していくつかの結果を返すと、ユーザーはブートストラップモーダルポップアップウィンドウで起こるこれらの結果にCRUD操作を実行するオプションがあります。

リアクションは親に状態を持ち上げることを示唆しています...しかし、その後私はユーザーがUPDATE操作で状態を変更し、その後心を変えて元のウィンドウに変更された状態を残す状況が残っています。 APIをもう一度

オプション1）、それを更新するには：私は新しいオブジェクトにステートフルオブジェクトをコピーして、ユーザーがキャンセルした場合...それを捨てること修正することができるが、この場合には、私は、オブジェクトのコピーについてはjavascriptの癖に実行し、私が解決するのに十分経験していない参考文献（How do I correctly clone a JavaScript object?）。

オプション2：私は何とかUPDATE子クラスにオブジェクトを渡した後、そこに状態を設定するが、これはreactJS理念に反するように思われ、それをしようとしているときに、私はエラーに遭遇したので、それが示しすることができます。

class base extends React.Component { 
    constructor() { 
     super(props); 
     this.state = {foo: "bar"} 
    } 

    render() { 
     // I want to be able to modify the state from BootStrapPopup with 
     // the option to go back to the original state if the user backs 
     // out from committing updating the object through the API 
     return (
      <BootStrapPopup /> 
     ) 
    } 

Answer 1

（...構造とJavaScript癖を反応させることにより）

は、私は基本的に、一時的に状態を変更すると、元に戻って道を残すための方法が必要ですが、私は、任意の解決策を見つけていませんprevStateを格納する状態を維持することができます

class base extends React.Component { 
    constructor() { 
     super(props); 
     this.state = {foo: "bar", prevFoo: ""} 
    } 
    ChangeState =() => { 
     this.setState((prevState) => { prevFoo: prevState.foo, foo: "newBar"}); 
    } 
    RevertChange =() => { 
     this.setState({foo: this.state.prevFoo}); 
    } 
    render() { 

     return (
      <BootStrapPopup /> 
     ) 
    }