Используя React, как передать функцию из родительского компонента в дочерний компонент и запустить ее в хуке useEffect? - PullRequest
Новая
       14

Используя React, как передать функцию из родительского компонента в дочерний компонент и запустить ее в хуке useEffect?

0 голосов
/ 01 октября 2019

Я использую React для передачи функции из родительского компонента в дочерний компонент и пытаюсь запустить ее в хуке useEffect().

Parent 

function Parent(props) {

  function alertMe() {
    alert('me');
  }

  render (
    <div>
      <Child alertMe={alertMe} />
    </div>
  );
}

Child 

function Child(props) {

  const { alertMe } = props;

  useEffect(() => {
    alertMe();
  }, [alertMe]);

  render (
    <div>
      // stuff
    </div>
  );
}

Если я удаляю alertMe как зависимость в useEffect() дочернего компонента, он срабатывает только один раз, но я получаю предупреждение:

В React Hook useEffect отсутствуют зависимости: 'alertMe'. Либо включите его, либо удалите массив зависимых реагирующих хуков / исчерпывающим образом

Функция alertMe определяется один раз в родительском компоненте при загрузке, поэтому я не понимаю, почему он будет работать бесконечнов дочернем компоненте. Это не меняется как состояние.

Как добавить alertMe в качестве useEffect() зависимости, но все же только запустить его один раз?

1 Ответ

0 голосов
/ 16 октября 2019

Смотрите, ваш Parent повторно объявляет alertMe каждый раз, когда он перерисовывается. И поскольку alertMe референтно отличается, useEffect в Child обнаружит это и запустит заново.

Лучше не бороться с зависимостями useEffect (они есть причина!). Давайте удостоверимся, что ваш alertMe относительно одинаков: 

function Parent(props) {

  const alertMe = useCallback(() => {
    alert('me');
  });

  render (
    <div>
      <Child alertMe={alertMe} />
    </div>
  );
}

Представьте себе useEffect со списком зависимостей как componentDidUpdate в мире хуков. Лучше синхронизировать компонент с реквизитом, чем игнорировать изменения снаружи.

...