Question

我遇到了一个用例，其中我必须将当前状态重置为初始状态。我尝试保存实例变量，但是忘记了它通过引用起作用，并且当状态更新时，实例变量也会更新。当用户按下“重置”按钮时，状态应指代初始状态，该状态存储在this.reset中。但是我找不到解决方法。

class MyApp extends {Component} {
  constructor(props){
    super(props);
    this.state = {
      data: null
    }
    this.reset = null;
    this.resetData = this.resetData.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const {data} = nextProps;
    this.reset = data;
    this.setState({
      data
    });
  }

  resetData(){
    this.setState({
      data: this.reset
    });
  }

  render() {
    return(
      <button onClick={this.resetData}> {this.state.data}</button>
    );
  }
}

Answer 1

您可以使用第三方库吗？

Lodash提供了deepClone() method，这对您很有用，并且不管传入的data的形状如何，您都可以重置组件的状态。

您还需要确保每次调用deepClone()时都使用resetData()，以确保传递给data的{{1}}引用是一个副本（克隆），而不是直接引用.setState()数据：

this.reset

如何在React Component中保留初始状态？

1 个答案: