Как предотвратить обновление состояния реагирующей функции onClick (за пределами useEffect)? - PullRequest
Новая
       22

Как предотвратить обновление состояния реагирующей функции onClick (за пределами useEffect)?

1 голос
/ 30 апреля 2020

Когда я использую 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') 
  }
}

1 Ответ

1 голос
/ 30 апреля 2020

При повторном рендеринге компонента он будет собирать переменные текущего контекста, если они не заполнены состоянием. Если вы хотите сохранить значение при рендеринге, но не хотите запускать рендеринг при его обновлении, используйте хук 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') 
  }
}
...