Я пытаюсь создать функциональный компонент с хуками, который вызывает функцию только один раз, когда она отключается . В этой функции мне нужно получить доступ к компонентам переменные текущего состояния .
Этот код и окно иллюстрируют основную проблему, с которой я сталкиваюсь
Я знаю, что Я мог бы передать переменную состояния в массиве зависимостей useEffect, но в моем примере из реального мира требуется, чтобы эффект вызывался только один раз, когда компонент размонтируется, и добавление его в массив вызывало бы его при каждом рендеринге.
Также я пытался использовать useCallback, useRef для переменной состояния и безуспешно искал похожие варианты использования и примеры, и мне кажется, что я что-то упустил.
Есть ли способ выполнить оба требования (вызывается только один раз и доступ к переменным текущего состояния)?
Также вот мой код моего примера. Кнопка монтирует / размонтирует счетчик, и я хотел бы, чтобы при его исчезновении печаталось последнее значение счетчика.
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>
);
}
Я был бы очень рад, если бы кто-нибудь знал способ решить это.