Question

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

考虑以下示例：

const [foo, setFoo] = useState(true)

useEffect(() => {
  return () => {
    if(foo) 
      console.log("T") 
    else
      console.log("F")
  }
}, [])

...later:

setFoo(false)

在此示例中，即使 foo 的当前值为 false，卸载时也会打印“T”。

您的第一个想法可能是将 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)

使用依赖项卸载时的 useEffect 清理

1 个答案: