Как получить доступ к обратному вызову, как в setState из useState Hook - PullRequest
Новая
       6

Как получить доступ к обратному вызову, как в setState из useState Hook

4 голосов
/ 06 марта 2019

Кому-нибудь удалось создать обратный вызов синхронизации для элемента обновления ловушки useState в реаги 16.8? Я искал один, чтобы я мог иметь дело с синхронными действиями со сторонней библиотекой, и я не могу сделать одну работу для своих нужд.

Если у кого-нибудь есть ссылки на людей, которые успешно завершили это, пожалуйста, добавьте их сюда.

Приветствия

Ответы [ 2 ]

6 голосов
/ 08 марта 2019

С перехватами вам больше не нужен обратный вызов из функции setState. Теперь вы можете установить состояние с помощью хука useState и прослушать его значение для обновления с помощью хука useEffect. Необязательный второй параметр хука useEffect принимает массив значений для прослушивания изменений. В приведенном ниже примере мы просто отслеживаем одно значение для изменений: 

const Example = () => {
  const [value, setValue] = useState(null);

  useEffect(() => {
    // do something when value changes
  }, [value]);

  return (
    <button onClick={() => setValue('Clicked!')}>
      Click Me!
    </button>
  );
};

Подробнее о useEffect крючке здесь .

2 голосов
/ 31 мая 2019

Вы можете использовать useEffect / useLayoutEffect для достижения этой цели: 

const SomeComponent = () => {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  }, [count]);

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

Если вы ищете нестандартное решение, проверьте этот пользовательский хук , который работает как useState, но принимает в качестве второго параметра функцию обратного вызова: 

import useStateWithCallback from 'use-state-with-callback';

const SomeOtherComponent = () => {
  const [count, setCount] = useStateWithCallback(0, count => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  });

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

Может быть установлен через npm install use-state-with-callback

Если вы хотите обновить макет синхронизатора, используйте import { useStateWithCallbackInstant } from 'use-state-with-callback';.

...