让我们学习如何使用react钩子获取prevState值。

我将创建一个按钮，该按钮使用react hooks增加显示先前和当前计数值的计数值。

有关最终代码，请转到文章末尾。

创建一个反应应用程序：

npx create-react-app myapp

然后，移至新创建的项目并点击

npm start

打开浏览器并在下面输入链接

http://localhost:3000

您应该会看到以下内容：

现在，在编辑器中打开项目。

现在，编辑App.js并创建一个增加count值的按钮。因此，App.js将如下所示。

function App() {

  const [count, setCount] = React.useState(0)

  const _increaseCount = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <div>Current Count Value: {count}</div>
      <button onClick={_increaseCount}>Increase Count</button>
    </div>
  );
}

保存后，您将在浏览器中查看效果：

现在，创建一个自定义钩子usePrevious，该钩子将返回传递给它的任何参数的先前值。

//custom Hook
function usePrevious(data){
  const ref = React.useRef();
  React.useEffect(()=>{
    ref.current = data
  }, [data])
  return ref.current
}

获得以前的状态计数值为：

  var prevCount = usePrevious(count)

然后，prevCount将return语句内的变量用作：

<div>Previous Count Value: {prevCount}</div>

因此，现在工作已完成，应用程序应如下图所示，您应该能够看到以前和当前的状态计数值。

App.js的最终代码如下所示：

import React from 'react';
import './App.css';

//custom Hook
function usePrevious(data){
  const ref = React.useRef();
  React.useEffect(()=>{
    ref.current = data
  }, [data])
  return ref.current
}

function App() {

  const [count, setCount] = React.useState(0)

  const _increaseCount = () => {
    setCount(count + 1)
  }

  const prevCount = usePrevious(count)

  return (
    <div className="App">
      <div>Previous Count Value: {prevCount}</div>
      <div>Current Count Value: {count}</div>
      <button onClick={_increaseCount}>Increase Count</button>
    </div>
  );
}

export default App;

参考

React Hooks: Get prevState values