在反应应用程序中获取快照侦听器错误答案

【问题标题】：getting snapshot listener error in react application在反应应用程序中获取快照侦听器错误
【发布时间】：2021-01-30 14:08:13
【问题描述】：

我是 react 新手，我正在使用 react js 和 firebase 构建一个待办事项应用程序。 Firebase 已成功连接到 react 应用程序，但我收到的此错误。它也说 FirebaseError：缺少或不足的权限。您能否解释一下是什么问题以及如何解决。

这是代码

import React, { useState, useEffect } from 'react';
import { Button } from '@material-ui/core';
import db from './firebase';
import Todo from './Todo';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');


  useEffect(() => {

    db.collection('todos').onSnapshot(snapshot => {
      setTodos(snapshot.docs.map(doc => doc.data().todo));
    })
  }, []);


  const addTodo = (event) => {
    event.preventDefault();
    setTodos([...todos, input]);
    setInput('');
  }
  return (
    <div className="App">
      <form>
        <input placeholder="Your ToDo's" onChange={event => { setInput(event.target.value) }} value={input} />
        <Button type="submit" disabled={!input} variant="contained" onClick={addTodo} color="primary">
          Add todo
        </Button>
      </form>

      <ul>
        {todos.map(todo => (
          <Todo text={todo} />
        ))}
      </ul>
    </div>
  );
}

export default App;

【问题讨论】：

标签： reactjs snapshot

【解决方案1】：

您需要更新您的 firestore.rules 以允许该集合/文档上的 read。

看看这个：https://firebase.google.com/docs/firestore/security/get-started

更新文件后，您可以通过以下方式部署新规则：

firebase deploy --only firestore:rules --project YOUR_PROJECT_ID

【讨论】：