javascript - 如何在 React Native 中将 Firebase 实时数据库数据值增加一个？

Question

我有一个这样的 Firebase 实时数据库。

我的根 |--- 我的 key 1 | |---我的值(value):1 | |--- 我的 key 2 | |---我的值(value):0 | |--- 我的 key 3 |---我的值(value):2

我需要将所有这些值递增 1 并获得以下输出。

我的根 |--- 我的 key 1 | |---我的值(value):2 | |--- 我的 key 2 | |---我的值(value):1 | |--- 我的 key 3 |---我的值(value):3

我如何使用循环来做到这一点？或者，在 React Native 中执行此操作的最佳方法是什么？

我真正想要的是这个。让我们想想，我有一个主屏幕。它有一个名为“列表值”的按钮。当我单击时，我导航到下一页(堆栈导航器)，它显示了 myKey1、myKey2、myKey3 的值。这是一个平面列表。假设在第二个屏幕中有一个名为“增量值”的按钮。当我按下它时，我想增加值并导航回主屏幕。

我试过这样的。

let arr = ['myKey1' , 'myKey2' , 'myKey3']

try {
  for(let i=0; i<arr.length; i++) {
     let ref = firebase.database().ref(myRoot).child(arr[i]);
     ref.transaction( function(myValue) {
        return (myValue || 0) + 1;
     })
  }
  this.props.navigation.goBack();
}
catch(error) {
  console.log(error));
}

如我所料，它改变了数据库中的值。但是，它在执行后给出了以下黄色警告。

Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

这是一个示例模型，用于解释我的需要。

如何解决这个问题？

Answer 1

请注意，您在每次迭代中调用:.then(() => this.props.navigation.goBack());。我认为您需要使用 transactions 中记录的 runTransaction .

样本是这样的结构:

myRoot
  |--- mykey1: number

对于这样的结构:

myRoot
  |--- mykey1
  |     |---myValue: number

您应该改用下一个 const ref 声明:

const ref = db.ref(myRoot).child(key).child('myValue');

示例 Firestore

const arr = ['myKey1' , 'myKey2' , 'myKey3'];
const db = firebase.database();

db.runTransaction(transaction => {
    return Promise.all(arr.map(key => {
      const ref = db.ref(myRoot).child(key);
      return transaction
        .get(ref)
        .then(val => transaction.update(ref, (val || 0) + 1));
    }));
  })
  .then(() => this.props.navigation.goBack())
  .catch((error) => console.log(error))

示例实时数据库

const arr = ['myKey1' , 'myKey2' , 'myKey3'];
const db = firebase.database();

Promise.all(arr.map(key => {
    const ref = db.ref(myRoot).child(key);
    return ref.transaction(function(myValue) {
      return (myValue || 0) + 1;
    })
  }))
  .then(() => this.props.navigation.goBack())
  .catch((error) => console.log(error))