Question

我真的很努力地使用React中的方法将状态重置为原始状态。我当前的重置方法仅重置该值。我尝试添加等于原始状态的const，然后设置等于该状态的const，但是我没有运气。

有什么建议吗？

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>

在React中重置组件状态

2 个答案: