reactJS對象複製到新的狀態VAR或穿過狀態樹

標題是有點難以解釋...這是我在做什麼....reactJS對象複製到新的狀態VAR或穿過狀態樹

我有一個反應的應用程序，被打一個API並返回一些結果，用戶可以選擇對這些結果執行CRUD操作，這些操作發生在引導模式彈出窗口中...

React建議將狀態提升到父級，這是可以的......但是我留下了一種情況，用戶修改UPDATE操作中的狀態，然後改變他們的想法並退出，並在原始窗口中保留修改後的狀態（這使我無法選擇，只能從API再次刷新吧）

選項1：我可以在有狀態的對象複製到一個新的對象和修改...如果用戶取消把它扔了，但在這種情況下，我碰上的JavaScript怪癖有關複製對象和參考文獻（How do I correctly clone a JavaScript object?），我沒有足夠的經驗來解決。

選項2：我能以某種方式將對象傳遞給UPDATE子類，然後設置狀態存在，但這似乎違背reactJS理念，它顯示了，因爲我遇到了錯誤，同時嘗試它。

基本上，我需要一種方法來臨時修改狀態，並留下很長的路要走回原來的，但我沒有找到任何解決辦法（由於反應結構和javascript怪癖......）

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 /> 
     ) 
    }

來源

2017-04-11 deltaskelta

您可以保持存儲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 /> 
     ) 
    }

來源

2017-04-11 09:24:47

reactJS對象複製到新的狀態VAR或穿過狀態樹

回答

相關問題