获得完整访问权限
测验

如何在 React 中重置组件的状态？

主题
React
在GitHub上编辑

TL;DR

要在 React 中重置组件的状态，您可以将状态设置回其初始值。这可以通过定义初始状态，然后使用 setState 函数来重置它来实现。例如，如果您有一个像这样的状态对象：

const [state, setState] = useState(initialState);

您可以通过调用以下方法来重置它：

setState(initialState);

如何在 React 中重置组件的状态？

使用带有钩子的函数式组件

在函数式组件中，您可以使用 useState 钩子来管理状态。要重置状态，您可以简单地使用初始状态值调用 setState 函数。

示例

import React, { useState } from 'react';


const MyComponent = () => {
  const initialState = { count: 0, text: '' };
  const [state, setState] = useState(initialState);


  const resetState = () => {
    setState(initialState);
  };


  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Text: {state.text}</p>
      <button onClick={resetState}>Reset</button>
    </div>
  );
};


export default MyComponent;

使用类组件

在类组件中，您可以通过使用初始状态值调用 this.setState 来重置状态。

示例

import React, { Component } from 'react';


class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.initialState = { count: 0, text: '' };
    this.state = this.initialState;
  }


  resetState = () => {
    this.setState(this.initialState);
  };


  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <p>Text: {this.state.text}</p>
        <button onClick={this.resetState}>Reset</button>
      </div>
    );
  }
}


export default MyComponent;

使用函数生成初始状态

有时，初始状态可能源自 props 或其他动态源。在这种情况下，您可以使用一个函数来生成初始状态。

示例

import React, { useState } from 'react';


const MyComponent = (props) => {
  const getInitialState = () => ({ count: props.initialCount, text: '' });
  const [state, setState] = useState(getInitialState);


  const resetState = () => {
    setState(getInitialState());
  };


  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Text: {state.text}</p>
      <button onClick={resetState}>Reset</button>
    </div>
  );
};


export default MyComponent;

延伸阅读

在GitHub上编辑