使用 React hooks 重置为初始状态

作者

使用 React hooks 重置为初始状态

Reset to the initial State using React hooks

要将组件重置为初始状态：

  1. 将初始状态存储在变量中。
  2. 当事件发生时，调用该setState()函数，将初始状态传递给它。
应用程序.js
import {useState} from 'react';

const initialState = {
  name: '',
  country: '',
  salary: null,
};

export default function App() {
  const [employee, setEmployee] = useState(initialState);

  const updateState = () => {
    setEmployee({name: 'Alice', country: 'Austria', salary: 100});
  };

  // 👇️ reset to initial state
  const resetState = () => {
    setEmployee(initialState);
  };

  return (
    <div>
      <button onClick={updateState}>Set state</button>

      <button onClick={resetState}>Reset to initial state</button>

      <h4>{JSON.stringify(employee, null, 4)}</h4>
    </div>
  );
}

重置为初始状态反应

useReducer要使用钩子将组件重置为其初始状态：

  1. 将初始状态存储在变量中。
  2. RESET在你的减速器中处理一个动作类型。
  3. 调度类型为 的操作RESET。
应用程序.js
import {useReducer} from 'react';

const initialState = 0;

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'RESET':
      return initialState;
    default:
      throw new Error(`Unhandled expression in switch: ${action.type}`);
  }
}

export default function App() {
  const [count, dispatch] = useReducer(reducer, initialState);

  const increment = () => {
    dispatch({
      type: 'INCREMENT',
    });
  };

  // 👇️ reset to initial state
  const reset = () => {
    dispatch({
      type: 'RESET',
    });
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>

      <button onClick={reset}>Reset</button>

      <h2>Count: {count}</h2>
    </div>
  );
}

反应 usereducer 重置状态

无论我们是使用
useState hook 还是
useReducer来管理状态，我们都必须将初始状态存储在一个变量中以便重置它。

我们在组件外部声明了初始状态，以避免每次组件重新渲染时都重新声明它，但您可能不会看到任何明显的性能差异。

不幸的是，没有内置的方法可以让我们将组件的状态重置为其初始状态，因此我们必须将初始状态提取到一个变量中。

当您使用useState钩子管理状态时，您所要做的就是调用您的
setState函数并将初始状态传递给它。

应用程序.js
const resetState = () => {
  setEmployee(initialState);
};

使用useReducer钩子，您必须为RESET
返回初始状态的状态添加一个动作处理程序。

应用程序.js
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    // 👇️ reset to initial state
    case 'RESET':
      return initialState;
    default:
      throw new Error(`Unhandled expression in switch: `);
  }
}

并发送一个类型为RESET：

应用程序.js
const reset = () => {
  dispatch({
    type: 'RESET',
  });
};

–

发表评论