use使用依赖项在卸载时执行清理

Question

我需要一种方法，只在组件卸载时运行React useEffect清理函数，但要使用组件的最新状态。

考虑以下示例：

const [foo, setFoo] = useState(true)
useEffect(() => {
return () => {
if(foo) 
console.log("T") 
else
console.log("F")
}
}, [])
...later:
setFoo(false)

在这个例子中；T"；即使CCD_ 1的当前值是CCD_。

您的第一个想法可能是将foo添加到效果的依赖数组中，但这会导致效果清理两次：一次是当状态更改为false时(打印"T"(，另一次是组件卸载时(打印"F"(。

我希望它只打印"；F"；，一旦组件卸载。

Answer 1

这个问题的一个解决方案是使用useRef，如下所示：

const [foo, setFoo] = useState(true)
// Store value of foo and keep it up-to-date.
const fooRef = useRef(foo)
useEffect(() => fooRef.current = foo, [foo]);
// Use ref value.
useEffect(() => {
return () => {
if(fooRef.current) 
console.log("T") 
else
console.log("F")
}
}, [])
...
setFoo(false)