在 Firebase Cloud Firestore 或实时数据库中存储增量计数器

Question

我有这个非常简单的增量计数器（见下文）。我在 WebStorm 上用 React.js 构建了它。如果您加载它，它会显示一个 0，并且每次您单击该按钮时计数都会增加 1。

我想做的是将这个数字保存在 Firebase 中。这样计数就不会在我每次关闭页面时丢失。相反，我想从到目前为止的所有计数开始，并且它们始终在 Firebase（Cloud Firestore 或实时数据库）中自动更新。

有谁知道我必须如何设置 Firebase 存储以及如何调整代码？非常感谢！

import React from "react";
import './App.css';

class SimpleCountdownTimer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            clicks:0,
            show:true
        };
    }

    IncrementItem = () => {
        this.setState({clicks:this.state.clicks + 1});
    }

    ToggleClick = () => {
        this.setState({show: !this.state.show});
    }


  render() {

  return (

<div>

<button onClick={this.IncrementItem}>Increase!</button>
 
    {this.state.show ? <h2>{this.state.clicks}</h2>:''}

</div>
    );
  }
}

export default SimpleCountdownTimer;

Answer 1

使用 Firestore，这很容易。

创建一个集合
在集合中创建文档
向文档添加一个字段，变量类型为“number”

那么，有两种情况：

我。 EASY：用户无需登录即可增加计数器。

您需要做的是创建一个服务器函数。此函数的触发器将是一个 HTTP 调用。从您的网页，您发送一个简单的 http 调用，例如“http://your-function-url/?counter=increment”（使用 axios、jquery，甚至只是 XHR）

[ 阅读此处了解操作方法：https://firebase.google.com/docs/functions/http-events ]

函数会在您调用时触发。在函数内部，您需要使用 set() 方法将数据添加到 Firestore，如下所示...

db.collection('YOUR_COLLECTION').doc('YOUR_DOCUMENT_ID').set({
  counter: admin.firestore.FieldValue.increment(1); // "counter" is the name of the field you created, 1 is the number by which to increment the value of the "counter" field
}, {merge:true}) // merge: true means that your document is not overwritten, only updated.
.then({
  console.log('succesfully incremented the counter');
  return res.end(); // this is important
})
.catch({
  console.error('error incrementing the counter: '+err);
  return res.end();
});

关于如何在 firebase 上创建 HTTP 函数的文档非常丰富，我上面所说的也是如此。

不太容易：如果您需要用户登录才能增加计数器，那么您需要配置 Firebase Auth，然后使用 Firebase Javascript 写入 Firestore 的 Web SDK。

希望对您有所帮助。请随意 google 我刚才说的任何内容，它们都有很好的记录。祝你好运

更新：要读取计数器的新值，您需要使用客户端文档查询（搜索“document.onSnapshot”）。这是一种从 Firestore 获取实时值并将其显示在您的网页上的方法。这也意味着具有“计数器”字段的文档需要 public 或仅显示给登录用户。您可以在“Firebase 规则”中配置该访问权限，您可以在其中设置它，以便特定文档具有与数据库其余部分不同的权限。

在 Firebase Cloud Firestore 或实时数据库中存储增量计数器

Store Increment Counter In Firebase Cloud Firestore or Realtime Database

increment

webstorm

firebase

reactjs

google-cloud-firestore