前端之家

  1. 首页
  2. 问答

反应useEffects详尽的部门只会触发创建组件将卸载功能

• 问答

我正在尝试实现useEffect回调以在卸载组件之前分派操作。该操作的目的是存储组件的最后状态，以便下次加载该组件时可以从该状态恢复。我只希望此回调在卸载时被触发。

当尝试为我的useEffect使用空的依赖项数组时，中的'exhaustive-deps'规则会响应建议的'eslint-plugin-react-hooks'要求，我包括了我试图保留的值。这样会导致效果，因此每次我存储状态时都会触发操作。

是否有一种更好的方法来处理这种情况，然后为此行禁用eslint？

这就是我想要的：

...
const [value,setvalue] = useState('');

useEffect(() => {
    return () => {
        storeValueaction(value);
    };
},[]);
...

eslint-plugin-react-hooks想要它的方式并导致在每个状态更改时分派操作：

...
const [value,[value,storeValueaction]);
...

我应该使用useEffect之外的其他东西吗？

memorymm808196 回答：反应useEffects详尽的部门只会触发创建组件将卸载功能

即使以当前方式实现它并禁用eslint规则，也不会得到预期的结果，因为在unmount上调度的状态值将是由于关闭而在初始安装期间的状态值。

在这种情况下，可以结合使用useRef和useEffect以获得所需的结果。完成后，您可以安全地禁用eslint规则，以确保您的代码不会导致意外行为

const [value,setValue] = useState('');
const valueRef = useRef(value);

useEffect(() => {
   valueRef.current = value;
},[value]);

useEffect(() => {
    return () => {
        storeValueAction(valueRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
},[]);
eslint-plugin-react-hooksjavascriptreactjsuse-effect
本文链接：https://www.f2er.com/3165114.html

大家都在问