在 React 中重置組件 state

Question

我真的很難用 React 中的方法將 state 重置回原來的狀態。 我當前的重置方法僅重置該值。 我嘗試添加等於原始 state 的 const，然后將 state 設置為等於那個，但我沒有運氣。

有什么建議嗎？

class App extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleReset = () => {
    const counters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState({ counters: counters });
  };
}

Answer 1

您可以將初始狀態保存在單獨的數組中，並創建該數組的副本作為初始狀態，並在使用handleReset時也創建該數組的副本。

例

 const counters = [ { id: 1, value: 4 }, { id: 2, value: 0 }, { id: 3, value: 0 }, { id: 4, value: 0 } ]; class App extends React.Component { state = { counters: [...counters] }; handleReset = () => { this.setState({ counters: [...counters] }); }; handleClick = index => { this.setState(prevState => { const counters = [...prevState.counters]; counters[index] = { ...counters[index], value: counters[index].value + 1 }; return { counters }; }); }; render() { return ( <div> {this.state.counters.map((counter, index) => ( <button id={counter.id} onClick={() => this.handleClick(index)}> {counter.value} </button> ))} <div> <button onClick={this.handleReset}>Reset</button> </div> </div> ); } } ReactDOM.render(<App />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

許多人不知道，更改key道具是重置組件狀態的一種方法。 當一個元素的key改變時，React將卸載它並重新實例化該組件。

如果您的組件具有父組件，並且可以獲取父組件以更改組件上的key 。 在下面的示例中，父組件的key狀態為數字。 當您單擊重置按鈕時，父組件會增加key ，並且Counter組件會重新安裝，從而清除所有狀態。 key任何不同值都將導致重新安裝組件。

 class Counter extends React.Component { state = { counters: [ { id: 1, value: 4 }, { id: 2, value: 0 }, { id: 3, value: 0 }, { id: 4, value: 0 } ], }; handleClick = index => { this.setState(prevState => { const counters = [...prevState.counters]; counters[index] = { ...counters[index], value: counters[index].value + 1 }; return { counters }; }); }; render() { return ( <div> {this.state.counters.map((counter, index) => ( <button id={counter.id} onClick={() => this.handleClick(index)}> {counter.value} </button> ))} <div> <button onClick={this.props.handleReset}>Reset</button> </div> </div> ); } } class App extends React.Component { state = { key: 0, }; handleReset = () => { this.setState(prevState => ({ key: prevState.key + 1 })); }; render() { return ( <div> <Counter key={this.state.key} handleReset={this.handleReset} /> </div> ); } } ReactDOM.render(<App />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 3

假設您的 state 是有效的 JSON，這似乎是一個簡單的解決方案：

const initialState = {...};

class ... {
    this.state = JSON.parse(JSON.stringify(initialState));

    reset = () => {
        this.setState(JSON.parse(JSON.stringify(initialState)));
    }
}

深度克隆，無需庫，本地代碼。