时间戳

首页 > 解决方案 > Firestore 功能运行但并不总是更新

react-native - Firestore 功能运行但并不总是更新

问题描述

我正在将 React-Native 与 Firestore 一起使用。我运行一个函数来更新 firestore 数据库，但它并不总是更新。有时我必须按两次按钮。

const markAsCompleted = async (id, isCompleted) => {
  console.log(id);
  await todoRef
    .doc(id)
    .update({
      isComplete: isCompleted,
    })
    .then(() => {
      console.log("mark As Completed Updated!");
    });
};

render(){
    return(
      <View>
          <Button onPress={()=> this.markAsCompleted('123', true)}
      </View>
    )
  }

标签： react-nativegoogle-cloud-firestore

解决方案

您的 React 组件按钮缺少结束标记，并且函数调用 markAsCompleted 不合适，因为它有一些 es6 语法错误。

我对您的代码进行了一些更改，看看是否可行。

import React,{Component} from “react”;
import {Button} from “ native-base”;
import {View} from “react-native”;
import firestore from “@react-native-firebase/firestore”;

export default class App extends Component{

async markAsCompleted =  (id, isCompleted) => { 
console.log(id); 
await firestore.collection(“collectionName”)
.doc(id)
 .update({ isComplete: isCompleted, })
 .then(() => { 
console.log("mark As Completed Updated!"); 
});
 }; 
render(){ 
return( 
<View>
 <Button onPress={()=> {this.markAsCompleted('123', true)} }>
</Button>
</View>
 ) }
}

  • 另请确保您已将 Firestore 规则设置为接受更新事务。

  • 使用此公共文档获取： Firestore 集合中的实时更新。

  • 您可以使用 onSnapshot() 方法收听文档。使用您提供的回调的初始调用会立即使用单个文档的当前内容创建文档快照。然后，每次内容更改时，另一个调用会更新文档快照。

  • 此外，在函数调用中添加回调侦听器可以帮助您获得成功或错误响应。

推荐阅读