Reset component state in React

问题

I'm really struggling to reset the state back to it's orginal from with a method in React. My current reset method only resets the value. I have tried adding in const equal to the original state and then setting state equal to that, but I have had no luck.

Any advice?

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

回答1:

You could keep the initial state in a separate array, and create a copy of the array as initial state, and also create a copy of the array when using the handleReset.

Example

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>

回答2:

Not known to many, changing the key prop is one way to reset a component's state. When the key of an element changes, React will unmount it and reinstantiate the component.

If your component has a parent component and could get the parent component to change the key on your component. In the example below, the parent component has a key state that is a number. When you click the reset button, the parent component increases the key and the Counter component is remounted, thereby clearing all state. Any different value of key will cause the component to remount.

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>

来源：https://stackoverflow.com/questions/51830711/reset-component-state-in-react