Данные Firebase загружаются только после входа и выхода - PullRequest
Новая
       11

Данные Firebase загружаются только после входа и выхода

1 голос
/ 17 июня 2020

У меня проблема с загрузкой данных с помощью firebase, и я реагирую на собственный. Когда я изначально go на экран никаких данных не выводит. Хотя, если я go вернусь к экрану входа в систему, а затем снова войду в систему, будут показаны данные, которые я искал.

Код выглядит следующим образом: Для ловушки useeffect: 

const ChatRooms = ({navigation}) => {
    const [data, setData] = React.useState([]);
    const [selectTitle, setTitle] = React.useState(new Map());
    useEffect(() => {
      const chatTitles = [];
      const chats = firebaseSDK.loadChatRooms();
      for(let i=0; i <chats.length; i++){
        chatTitles.push({title: chats[i]});
      }
      setData(chatTitles);
    }, []);

Для loadChatRooms: 

  loadChatRooms(){
   const chatrooms = firebase.database().ref();
   let check = [];
   chatrooms.orderByKey()
   .on("value", (data) => {
    check = Object.keys(data.val());
    }, function (errorObject) {
      console.log("The read failed: " + errorObject.code);
    });
    return check;
  };

Я изо всех сил пытаюсь найти проблему. Я предполагаю, что это как-то связано с взаимодействием firebase / useeffect.

Спасибо! :)

1 Ответ

1 голос
/ 17 июня 2020

Проблема в том, что вы не справляетесь с асинхронной загрузкой данных.

Самый простой способ показать, как это исправить, - поместить код, загружающий данные в yoru ChatRooms: 

const ChatRooms = ({navigation}) => {
    const [data, setData] = React.useState([]);
    const [selectTitle, setTitle] = React.useState(new Map());
    useEffect(() => {
      const ref = firebase.database().ref();
      ref.orderByKey().on("value", (data) => {
        const chatTitles = [];
        chats = Object.keys(data.val());
        for(let i=0; i <chats.length; i++){
          chatTitles.push({title: chats[i]});
        }
        setData(chatTitles);
      }, function (errorObject) {
        console.log("The read failed: " + errorObject.code);
      });
    }, []);

При перемещении кода, обрабатывающего данные, в функцию обратного вызова on(), он запускается после загрузки данных. Интересным побочным эффектом этого является то, что он также будет обновлять состояние всякий раз, когда данные изменяются в базе данных.

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

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

  const ref = firebase.database().ref();
  ref.orderByKey().on("value", (data) => {
    const chatTitles = [];
    data.forEach((child) => {
      chatTitles.push({title: child.val()});
    });
    setData(chatTitles);
  }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
  });
...