React Hooks Firebase - ловушка useEffect не возвращает никаких данных - PullRequest
Новая
       15

React Hooks Firebase - ловушка useEffect не возвращает никаких данных

1 голос
/ 04 апреля 2020

Я пытаюсь использовать хук useEffect в React для прослушивания изменений в местоположении в firestore.

Изначально у меня не было пустого массива в качестве второго пропеллера в методе useEffect, и я не отписался от onSnapshot слушателя. Через короткую задержку я получил правильные данные в переменной projects.

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

Что может помешать обновлению переменной отражать данные в firestore? 

function useProjects(organisation) {
  const [projects, setProjects] = useState({
    docs: []
  });

  useEffect(() => {
    if (!organisation.docs[0]) return;
    const unsubscribe = firebase.firestore().collection('organisations').doc(organisation.docs[0].id).collection("projects").onSnapshot(snapshot => {
      setProjects(snapshot);
    });

    return () => unsubscribe()
  }, []);

  return projects
};

const projects = useProjects(organisation);

1 Ответ

2 голосов
/ 04 апреля 2020

Вам понадобится значение в массиве зависимостей для ловушки useEffect. Я бы, вероятно, предложил значения, которые вы используете в useEffectHook. В противном случае с [] в качестве массива зависимостей эффект будет срабатывать только один раз (при монтировании) и никогда больше. Смысл массива зависимостей заключается в том, чтобы сообщать реагировать на повторный запуск ловушки при каждом изменении зависимости.

Вот пример, который я бы предложил, основываясь на том, что в данный момент находится в ловушке (используя идентификатор, который вы отправляете в firebase в звонок). Здесь я использую необязательную цепочку, так как это делает логику c менее многословной. 

function useProjects(organisation) {
  const [projects, setProjects] = useState({
    docs: []
  });

  useEffect(() => {
    if (!organisation.docs[0]) return;
    const unsubscribe = firebase.firestore().collection('organisations').doc(organisation.docs[0].id).collection("projects").onSnapshot(snapshot => {
      setProjects(snapshot);
    });

    return () => unsubscribe()
  }, [organization.docs[0]?.id]);

  return projects
};
...