1

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

当尝试为我的 useEffect 使用空依赖项数组时，“exhaustive-deps”规则会响应推荐的“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 我还应该使用什么？

4

1 回答 1

4

即使您以当前方式实现它并禁用 eslint 规则，预期结果也不会正确，因为 unmount 时调度的 state 值将是由于关闭而在初始 mount 期间的 state 值。

对于这种情况，您可以使用 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
}, []);
于 2019-11-04T16:54:01.827 回答