ComponentWillUnmount 与 React Hooks 等效，可以访问状态变量的当前值？答案

【问题标题】：ComponentWillUnmount equivalent with React Hooks that has access to the current values of state variables?ComponentWillUnmount 与 React Hooks 等效，可以访问状态变量的当前值？
【发布时间】：2023-04-04 16:32:01
【问题描述】：

我正在尝试构建一个带有钩子的功能组件，它在卸载时只调用一次函数。在这个函数中，我需要访问组件当前状态变量。

This codesandbox illustrates the core problem I'm facing

我知道我可以在 useEffect 依赖数组中传递状态变量，但在我的实际示例中，要求效果仅在组件卸载时调用一次，并将其添加到数组中会导致它在每次渲染时调用。

我还尝试了 useCallback、useRef 到 state 变量并搜索了类似的用例和示例但没有成功，我觉得我错过了一些东西。

有没有办法同时满足这两个要求（只调用一次并访问当前状态变量）？

这也是我的示例代码。按钮安装/卸载计数器，我想要实现的是，计数器的最后一个值在消失时打印。

import * as React from "react";
import "./styles.css";
import { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    return () => {
      // this should print the counters current value
      console.log("Count was " + count + " when counter disappeard!");
    };
  }, []); // Empty because effect should only run when component unmounts

  const handleClick = () => {
    setCount(count + 1);
  };

  return <button onClick={handleClick}>{count}</button>;
};

export default function App() {
  const [showCounter, setShowCounter] = useState(true);

  // mount/unmount the counter
  const handleClick = () => {
    setShowCounter(!showCounter);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Show/Hide counter</button>
      {showCounter && <Counter />}
    </div>
  );
}

如果有人知道解决这个问题的方法，我会非常高兴。

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

另一个解决方案是将状态保存在 ref 中，并有一个单独的 useEffect 钩子，当状态改变时更新 ref。然后您可以通过 ref 对象访问“最后”状态。

示例： https://codesandbox.io/s/trusting-diffie-8tiev

【讨论】：

正是我需要的。这样，逻辑就保持在我的组件中。这是我想要实现的一件事。谢谢你。不过，React 团队在这种情况下的建议会很有趣。

【解决方案2】：

这可以工作：

https://codesandbox.io/s/blue-leaf-jmdu1

我不知道这是否是您正在寻找的解决方案

【讨论】：

在这个例子中从技术上讲：是的。但这意味着每次我不想使用计数器组件时，我都必须在计数器之外维护这个状态。这是我想避免的。
但也许我可以将计数器包装到另一个只负责该状态的组件中?。我会尝试一下，让你知道这是否有效。
所以基本上这种方法是一种可能的解决方案，但在我的真实示例中它需要一种复杂的工作。感谢您的意见。