Question

当我使用useEffect时，可以通过取消这样的变量来防止未安装组件的状态更新

useEffect(() => {
 const alive = {state: true}
//...
if (!alive.state) return
//...
 return () => (alive.state = false)
}

但是当我使用按钮单击（在useEffect外部）中的函数时，该怎么做？

例如，此代码无效

export const MyComp = () => {

  const alive = { state: true}
  useEffect(() => {
   return () => (alive.state = false)
  }

  const onClickThat = async () => {
    const response = await letsbehere5seconds()
    if (!alive.state) return
    setSomeState('hey') 
    // warning, because alive.state is true here, 
    // ... not the same variable that the useEffect one
  }
}

或这个

export const MyComp = () => {

  const alive = {}
  useEffect(() => {
   alive.state = true
   return () => (alive.state = false)
  }

  const onClickThat = async () => {
    const response = await letsbehere5seconds()
    if (!alive.state) return // alive.state is undefined so it returns
    setSomeState('hey') 
  }
}

Answer 1

当组件重新渲染时，它将垃圾收集当前上下文的变量，除非它们是全状态的。如果要在渲染之间保留一个值，但又不想在更新时触发重新渲染，请使用useRef钩子。 https://reactjs.org/docs/hooks-reference.html#useref

export const MyComp = () => {

  const alive = useRef(false)
  useEffect(() => {
   alive.current = true
   return () => (alive.current = false)
  }

  const onClickThat = async () => {
    const response = await letsbehere5seconds()
    if (!alive.current) return
    setSomeState('hey') 
  }
}

如何防止对React onClick函数（在useEffect之外）进行状态更新？

1 个答案: