React Native how to read Real Time Database Firebase

问题

So I got one Screen with the Firebase configuration and one which should call the data. I'd like to have up to date Information. As of now I have the following code:

export const firebaseFetchProfileItem = (category) => {
  var snap;
  database
    .ref("users/" + authentification.currentUser.uid + "/profile/" + category)
    .on("value", function (snapshot) {
      snapshot.val() ? (snap = snapshot.val()) : undefined;
    }),
    function (error) {
      log.error(error);
    };
  return snap;
};

It works "okayish", since it doesnt update the Values the first time I enter a screen, but only after the second time I open the certain screen which should show the values.

The values are called like this in the other screen:

 componentDidMount() {
    this.state.item.bday = firebaseFetchProfileItem("bday");
  }

I tried doing the following:

export const firebaseFetchProfileItem = (category) => {
  return (
  database
    .ref("users/" + authentification.currentUser.uid + "/profile/" + category)
    .on("value", function (snapshot) {
      return snapshot.val() ? (snapshot.val()) : undefined;
    }),
    function (error) {
      log.error(error);
    };
  )
};

But no luck, it returns [Function anonymous] and thus giving the error that components can't be functions etc. When I log snapshot.val(), I get the correct birthday. So I know the mistake lies somewhere in getting the value.

I also tried the following:

export const firebaseFetchProfileItem = (category, item) => {
  database
    .ref("users/" + authentification.currentUser.uid + "/profile/" + category)
    .on("value", function (snapshot) {
      snapshot.val() ? (item = snapshot.val()) : undefined;
    }),
    function (error) {
      log.error(error);
    };
};

and

componentDidMount() {
    firebaseFetchProfileItem("bday", this.state.item.bday);
  }

But no luck either.. where am I going wrong? How can I show the updated value at all times? I also tried some working with promises and async calls, but when I did that it didnt work as planned and the fetch fucntion returned a promise. I also tried using the functions in the same screen but it didn't show any differences.. kinda hopeless atm :D

Thank you very much in advance!

回答1:

Data is loaded form Firebase asynchronously, which means you can't return it from firebaseFetchProfileItem. Instead what you'd do is have firebaseFetchProfileItem put the data into the state once it's loaded, which then ensures that React repaints the UI based on the new data (including when that data is updated in the database).

export const firebaseFetchProfileItem = (category, item) => {
  database
    .ref("users/" + authentification.currentUser.uid + "/profile/" + category)
    .on("value", function (snapshot) {
      setState({ [category]: snapshot.val() });
    }),
    function (error) {
      log.error(error);
    };
};

Also see:

• How to update Firebase data to the React application in realtime
• Retrieving (allpost) data from firebase and using uid want to retrieve user information also
• this.setState is not working when using firebase database

来源：https://stackoverflow.com/questions/61974989/react-native-how-to-read-real-time-database-firebase