卸载组件时未获得状态值答案

【问题标题】：on unmounting of component not getting the state value卸载组件时未获得状态值
【发布时间】：2022-06-13 15:22:49
【问题描述】：

我有一个状态变量，我有一个值，所以在卸载之前我需要将它记录到一些分析中。因此，当我访问状态时，它显示为未定义。所以在卸载之前我需要获取这些数据。

const [name, setName] = useState(null);

useEffect(() => {
  return () => {
    console.log(name) // null
  }
}, [])

<input value={name} onChange={e => setName(e.target.value)} />

这是我没有得到安装前的最后一个值。我怎样才能在安装发生之前获得这个值

【问题讨论】：

标签： reactjs

【解决方案1】：

您需要在 useEffect 添加 name 作为依赖项，以便在更新名称状态值时 react 运行效果。此外，在卸载时，它将具有 name 属性的最新状态绑定。

useEffect(() => {
    return () => {
      console.log(name);
    }
  }, [name]);

您可以在react.org阅读有关 useEffect 的信息

【讨论】：

【解决方案2】：

在钩子中添加依赖项，因为它会在您开始输入时发生变化，并且 useEffect 清理功能将为您提供最后状态

useEffect(() => {
    return () => {
      console.log(name);
    }
}, [name]);

【讨论】：

【解决方案3】：

在我们的项目中，我们为此目的使用了一个自定义钩子 useIsMounted：（我们没有发明这个 - 有很多资源可以找到）。通过使用名称作为依赖的标准 useEffect 逻辑，每次击键都会导致代码触发，这在我们的案例中是不可取的。我们只希望在卸载时有一个触发器。

import {useEffect, useRef } from 'react';

//custom hook outside the component to detect unmount
export default function useIsMounted() {
    const isMounted = useRef(false)
    useEffect(() => {
        isMounted.current = true
        return () => {
            isMounted.current = false
        }
    }, [])
    return () => isMounted.current
}

将其存储在 hooks/mounted.js 下，您可以像在此示例中一样使用它

import useIsMounted from '../hooks/mounted'

export default function AnyComp() {

    const mounted = useIsMounted()

    const [name, setName] = useState(null)

    useEffect(() => {
        console.log('AnyComp mounted')
        return () => {
            if (!mounted()) {
                console.log('AnyComp unmounted', name)
            }
        };
    }, [mounted])

    return (
        <input value={name} onChange={e => setName(e.target.value)} />
    )
}

console.log 现在应该反映状态变量的实际值！

【讨论】：