Reacts useEffects 詳盡的 deps 僅觸發創建組件將卸載功能

Question

我正在嘗試實現一個 useEffect 回調以在卸載組件之前調度一個操作。 此操作的目的是存儲組件的最后一個 state，以便下次加載此組件時可以從該 state 恢復。 我只希望在卸載時觸發此回調。

當嘗試為我的 useEffect 使用空依賴項數組時，“exhaustive-deps”規則會響應推薦的“eslint-plugin-react-hooks”要求，我包含了我試圖堅持的值。 這導致每次我存儲 state 時都會觸發效果和動作。

有沒有更好的方法來處理這種情況，然后禁用這條線的 eslint？

這是我想要的：

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

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

eslint-plugin-react-hooks 想要它並導致在每個 state 更改上調度操作的方式：

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

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

除了 useEffect 我還應該使用什么？

Answer 1

即使您以當前方式實現它並禁用 eslint 規則，預期結果也不會正確，因為卸載時調度的 state 值將是初始掛載期間的 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
}, []);