javascript - Reset component state in React - Stack Overflow

admin管理员组

文章数量:1346324

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

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

• javascript
• reactjs
• state

Share Improve this question Follow edited Dec 1, 2018 at 22:21 Yangshun Tay 53.3k3333 gold badges123123 silver badges150150 bronze badges asked Aug 13, 2018 at 21:19 Carter SteinhoffCarter Steinhoff 4111 gold badge11 silver badge1010 bronze badges 1

• It's a not valid JS code. Please take a look at brackets. – Serge K Commented Aug 13, 2018 at 21:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

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

If your ponent has a parent ponent and could get the parent ponent to change the key on your ponent. In the example below, the parent ponent has a key state that is a number. When you click the reset button, the parent ponent increases the key and the Counter ponent is remounted, thereby clearing all state. Any different value of key will cause the ponent 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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

With the assumption that your state is valid JSON, this seems a simple solution:

const initialState = {...};

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

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

Deep cloning, no libs needed, native code.

本文标签： javascriptReset component state in ReactStack Overflow