У меня есть слушатель db, который должен получить доступ к свойствам компонента (которые могут меняться в течение всего срока службы компонента). У меня проблема в том, что когда я нахожусь в локальной области действия слушателя, материал глобальной области не обновляется. Например, представьте, что у меня есть свойство userData, которое вначале имеет такую ​​форму:

{
   name: "anthony"
}

Добавить изменяет значение своего поля на «отметку» по прошествии неопределенного времени.

Если я запускаю этот код:

console.log("Global: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "mark"} OK

const onPostsCollectionUpdate = (snapshot) => {
    /*
      This function gets the initial amount of posts 
      and the new ones that are uploaded in real time.
    */
    console.log("Local: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "anthony"} NOT UPDATED!

    ...
}

 useEffect(() => {
    const { firebase, attachListener } = props;

    // Create a Real-time Database listener
    const postsListener = firebase
      .getDatabase()
      .collection("posts")
      .doc(firebase.getCurrentUser().uid)
      .collection("userPosts")
      .orderBy("date")
      .limitToLast(MAX_POSTS_TO_RETRIEVE_LENGTH)
      .onSnapshot(onPostsCollectionUpdate); // Get the initial amount of posts

    // Attach the listener
    attachListener(postsListener);
  }, []);

Получаю такой результат:

Глобальный: {"name": "anthony"}

Местный: {"name": "anthony"}

Global: {"name": "mark"}

Местный: {"name": "anthony"}

Как видите, внутри метода «Post Collection Update» свойство не обновляется. Я также пробовал использовать переменную состояния и получил тот же результат.

Есть идеи, почему это происходит и как получить самые последние значения в локальной области слушателя?

Спасибо.

1
Raul 29 Сен 2020 в 21:16

1 ответ

Лучший ответ

Попробуйте использовать этот код

import React, { useCallback } from 'react';

console.log("Global: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "mark"} OK

const onPostsCollectionUpdate = (snapshot) => {
    /*
      This function gets the initial amount of posts 
      and the new ones that are uploaded in real time.
    */
    console.log("Local: " + props.userData) <----------------- Before: {name: "anthony"} ; After: {name: "anthony"} NOT UPDATED!

    ...
}

const initializeListener = useCallback(() => {
  const { firebase, attachListener } = props;

  // Create a Real-time Database listener
  const postsListener = firebase
    .getDatabase()
    .collection("posts")
    .doc(firebase.getCurrentUser().uid)
    .collection("userPosts")
    .orderBy("date")
    .limitToLast(MAX_POSTS_TO_RETRIEVE_LENGTH)
    .onSnapshot(onPostsCollectionUpdate); // Get the initial amount of posts

  // Attach the listener
  attachListener(postsListener);
}, [props]);

useEffect(() => {
  initializeListener();
}, [initializeListener]);
1
marc_s 30 Сен 2020 в 18:53