我可以用当前数据调用componentWillUnmount（功能组件）吗？

Question

我有一个功能组件

export const Example = () => {
    const [data, setData] = useState<number>(0);

    useEffect(() => {
        return () => {
            console.log("data", data);
            // ----> Here i want current value of data at the componentWillUnmount
        };
    }, []);

    return (
        <div>
            <button onClick={() => setData((prev) => prev + 1)}>Inc</button>
            {data}
        </div>
    );
};

假设我渲染了这个组件，点击了按钮 5 次。然后我卸载了这个组件。我可以以某种方式使用当前（4）数据值在 componentWillUnmount 中调用 console.log （对于 func 组件，在“useEffect”中“返回”）吗？

注意：我无法将数据作为 useEffect 中的 deps 传递，因为我不想每次数据更改时都看到包含数据的 console.log

Answer 1

是的，您可以使用 ref 记下

data

的最新值，然后在清理函数中访问该 ref。

const [data, setData] = useState<number>(0);
const ref = useRef(data);
ref.current = data;
useEffect(() => {
  return () => {
    console.log("data", ref.current);
  }
}, []);