Блог

Главная - Вопросы по программированию - В useEffect hook, как узнать, какое событие вызвало изменение состояния?

В useEffect hook, как узнать, какое событие вызвало изменение состояния?

#reactjs #react-hooks

#reactjs #реагирующие крючки

Вопрос:

Я использую useEffect hook для выполнения некоторых побочных эффектов после обновления состояния. И это отлично работает, всякий раз, когда вызывается дочерний компонент setOptions , useEffect также срабатывает.
Я пытаюсь выяснить, есть ли способ различать, кто обновил параметры, и на основе этого выполнять дополнительную работу? Точнее, я хотел бы вызвать другую функцию useEffect только в том случае, если зависимость была обновлена конкретным компонентом. Вот упрощенный пример того, что я пытаюсь сделать:

 function App() {
  const [value, setValue] = useState({});
  const [options, setOptions] = useState([]);

  useEffect(() => {
    const newValues = await getNewValues();

    setValue(newValues);

    // If options have been changed from ChildComponentA
    // Then doSomething() else nothing
  }, [options]); 

  function doSomething() {}

  return(
      <>
        <ChildComponentA handleChange={setOptions} />
        <ChildComponentB handleChange={setOptions} />
      </>
  )
}

Пример может показаться странным, это всего лишь пример проблемы, с которой я столкнулся. Основная проблема заключается в том, что состояние может быть изменено несколькими событиями, и я не могу сказать, какое событие вызвало изменение состояния.

Ответ №1:

Может быть, вы могли бы попробовать добавить дополнительный параметр к вашей options переменной, который сообщал бы вам, откуда было вызвано изменение, т.Е. options.child = 'A' сообщал бы вам, что оно пришло из A, и вы могли бы проверить это в useEffect с условием as if (options.child == 'A') , это, конечно, потребовало options бы быть объектом, а не массивом и что в рамках handleChange обратного вызова вы делаете что-то вроде.

 <ChildComponentA handleChange={(value) => {value.child ='A'; setOptions(value);}} />

Углубляясь и в качестве личной рекомендации, ваше приложение не должно стремиться работать по-разному с одним и тем же состоянием, если оно изменяется в том или ином месте, поскольку одна из основных целей состояния — быть универсальным источником истины в вашем компоненте, и что каждый использующий его подкомпонент рассматривает его как такой.

Метки: , ,