React useEffect exhaustive deps only trigger to create component will unmount 功能

Question

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

当尝试为我的 useEffect 使用一个空的依赖数组时，'exhaustive-deps' 中的规则 recommended 'eslint-plugin-react-hooks' 要求我包含我试图坚持的值。这导致每次我存储状态时都会触发效果和动作。

有没有更好的方法来处理这种情况然后禁用此行的 eslint？

这是我想要的：

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

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

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

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

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

我应该为此使用 useEffect 以外的东西吗？

Answer 1

即使您以当前方式实现它并禁用 eslint 规则，预期结果也不会正确，因为卸载时分派的状态值将是由于关闭而导致的初始挂载期间的状态值。

对于这种情况，您可以结合使用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
}, []);

React useEffect exhaustive deps only trigger to create component will unmount 功能

Reacts useEffects exhaustive deps only trigger to create component will unmount functionality

javascript

reactjs

use-effect

eslint-plugin-react-hooks