javascript - Firebase:如何在 React Native 中异步更新记录的值？

Question

我正在寻找一种解决方案来更新 firebase 数据库中的部分记录，最终我发现我需要该记录的 uid。所以我首先有一个查询来检索 uid，然后执行更新。问题是，由于第一个查询是异步的，因此第二个控制台日志首先执行，因此第一次运行时的 uid 值为 null。如何编辑代码以便首先获取 uid，然后根据第一个查询的结果执行更新操作？这是我的代码:

export const cupChanged = ({cup}) => {
  const {currentUser} = firebase.auth();
  let userSettingsUid = null;
  firebase
    .database()
    .ref(`/users/${currentUser.uid}/settings`)
    .on('value', snapshot => {
      if (snapshot.val() != null) {
        const userSettings = _.map(snapshot.val(), (val, uid) => {
          return {...val, uid};
        });
        userSettingsUid = userSettings[0].uid;
        console.log('First stage is : ' + userSettingsUid);
      }
    });
  return dispatch => {
    console.log('Second stage is : ' + userSettingsUid);
    firebase
      .database()
      .ref(`/users/${currentUser.uid}/settings/${userSettingsUid}`)
      .update({
        cup,
      })
      .then(() => {
        dispatch({
          type: CUP_CHANGED,
          payload: cup,
        });
      });
  };
};

Answer 1

通过使用once()方法“监听指定事件类型的一个事件”并返回一个 Promise，该 Promise 解析为 DataSnapshot ，您将能够链接不同的 Promise，如下所示:

  export const cupChanged = ({ cup }) => {
    const { currentUser } = firebase.auth();
    let userSettingsUid = null;

    return firebase
      .database()
      .ref(`/users/${currentUser.uid}/settings`)
      .once('value')
      .then(snapshot => {
        if (snapshot.val() != null) {
          const userSettings = _.map(snapshot.val(), (val, uid) => {
            return { ...val, uid };
          });
          userSettingsUid = userSettings[0].uid;
          console.log('First stage is : ' + userSettingsUid);
          return firebase
            .database()
            .ref(`/users/${currentUser.uid}/settings/${userSettingsUid}`)
            .update({
              cup
            });
        } else {
          throw new Error('Snapshot is null');
        }
      })
      .then(() => {
        dispatch({
          type: CUP_CHANGED,
          payload: cup
        });
      })
      .catch(err => {
        //....
        //return .... 
      });
  };