Бесконечный цикл в исправлении эффекта использования?

# #reactjs #firebase #firebase-realtime-database

Вопрос:

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

 useEffect(() => {
    let jobs = [];
    firebase.database().ref("1h5GOL1WIfNEOtcxJVFQ0x_bgJxsPN5zJgVJOePmgJOY/Jobs").on("value", snapshot => {
      snapshot.forEach(snap => {
        jobs.push(snap.val());
      });
    })

    populateJobs(jobs);
  },[]);
 

Комментарии:

1. Что такое populateJobs ?

2. const [список вакансий, вакансии] = useState([0]);

3. задания-это просто объект, содержащий информацию о задании, полученную из firebase

4. зачем сворачивать свой собственный материал firebase, там есть крючки

Ответ №1:

Как прокомментировал Рэй, имеет значение, как populateJobs это определено. Но на первый взгляд вам нужно будет позвонить из обратного вызова:

   useEffect(() => {
    firebase.database().ref("1h5GOL1WIfNEOtcxJVFQ0x_bgJxsPN5zJgVJOePmgJOY/Jobs").on("value", snapshot => {
      let jobs = [];
      snapshot.forEach(snap => {
        jobs.push(snap.val());
      });
      populateJobs(jobs);
    })

  },[]);
 

Комментарии:

1. О боже, спасибо за помощь. Это все исправило. Чувствую себя дурачком

Ответ №2:

Я предполагаю populateJobs , что это функция, объявленная в вашей области.

Если это так, вы можете завернуть его, useCallback чтобы убедиться, что ссылка на функцию не изменится.

 const populateJobsFixed= useCallback(populateJobs, [])

useEffect(() => {
    ...
    populateJobsFixed(jobs);
  },[populateJobsFixed]);
 

Ответ №3:

populateJobs-это зависимость эффекта использования

Вам нужно, чтобы список зависимостей был

 },[populateJobs]);
 

Вместо пустого массива

Ответ №4:

Второй аргумент полезного эффекта(()=>{},[]) который принимает массив аргументов, указывающих, как реагировать на изменения, которые должны выполняться при прохождении обратного вызова.

Если передается пустой массив, он запускается только один раз, ведя себя как метод componentdidmount

Когда переменная передается, она запускается каждый раз, когда значение переменной изменяется.

Кроме того, если мы передадим объект в качестве второго параметра, он также проверит изменение ссылки.