Реагирует useEffects исчерпывающий триггер deps только для создания компонента отключит функциональность - PullRequest
Новая
       19

Реагирует useEffects исчерпывающий триггер deps только для создания компонента отключит функциональность

1 голос
/ 04 ноября 2019

Я пытаюсь реализовать обратный вызов useEffect для отправки действия перед размонтированием компонента. Смысл этого действия - сохранить последнее состояние моего компонента, чтобы я мог выйти из этого состояния при следующей загрузке этого компонента. Я только хочу, чтобы этот обратный вызов был запущен при размонтировании.

При попытке использовать пустой массив зависимостей для моего useEffect правило «исчерпывающего действия» реагирует на рекомендуемые требования «eslint-plugin-реагировать-крючки». Я включаю значение, которое пытаюсь сохранить. Это приводит к тому, что эффект и, следовательно, действие запускаются каждый раз, когда я сохраняю состояние.

Есть ли лучший способ справиться с этой ситуацией, чем отключение eslint для этой строки?

Вот что я хочу:

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

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

Способ, которым eslint-plugin-реагирующий-ловушка хочет этого и приводит к тому, что действие отправляется при каждом изменении состояния: 

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

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

Есть ли что-то кроме useEffect, которое я должениспользовать для этого?

1 Ответ

4 голосов
/ 04 ноября 2019

Даже если вы реализуете его текущим способом и отключите правило 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
}, []);
...