Reactjs-Cloud Firestore Web SDK |实时更新onSnapshot（）方法| xhr返回ERR_Network_Changed

Question

当我在React + firestore项目中遇到错误时，我需要您的帮助。 我正在尝试使用gatsbyjs作为样板和Firestore实时更新来构建Todo应用。

我有一个简单的statefull组件，它显示一个表单以将待办事项提交到我的Firestore数据库，并在动态待办清单从数据库返回的待办事项列表下方。 一切工作正常，因为我可以将待办事项从HTML表单元素发送到Firestore数据库，然后直接侦听更改。在firestore db上进行更改后，我将返回对象存储在一个状态上，然后使用它重新呈现下面的列表。

这是我的组成部分：

import React from 'react'
import Link from 'gatsby-link'
import db from '../firebase/firebase.js'

function TodoList(props) {
  let items = props.data.map((todo) =>
    <li key={todo.id}>Todo : {todo.text}</li>
  );
  return (
    <ul>{items}</ul>
  )
}

class IndexPage extends React.Component {
  constructor(props) {
    super(props);

    this.colRef = db.collection("todos");
    this.state = {
      todoText: "",
      todoChecked: false,
      todos: [],
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.todosListener = this.todosListener.bind(this);
  }

  //Suscribe to firestore realtime for changes
  componentDidMount() {
    this.unsuscribe = this.colRef.onSnapshot(this.todosListener,
    function(error) {
      console.log(`Error on firestore Snapshot: ${error}`)
    });
  }

  //Unsuscribe from firestore listener
  componentWillUnmount() {
    unsuscribe();
  }

  todosListener(snapshot) {
    let todosList = snapshot.docs.map((docSnapshot) => ({
      id: docSnapshot.id,
      text: docSnapshot.data().todo,
      done: docSnapshot.data().checked,
    }));
    this.setState({todos: todosList});
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ?
    target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();

    this.colRef.add({
      todo: this.state.todoText,
      checked: this.state.todoChecked,
    })
    .then(function(docRef) {
      console.log("New todo has been succesfully created");
    })

    this.setState({todoText: ''});
    this.setState({todoChecked: false});
  }

  render() {
    return(
      <div>
        <h1>Hi people</h1>
        <p>Welcome to your new Gatsby site.</p>
        <h2>Enter a new todo to firestore DB</h2>
        <form>
          <label>
            Todo :
          <input type="text"
            value={this.state.todoText}
            name="todoText"
            onChange={this.handleChange}
            style={{margin: 10}} />
          </label>
          <br></br>
          <label>
            Done
          <input type="checkbox"
            checked={this.state.todoChecked}
            name="todoChecked"
            onChange={this.handleChange}
            style={{margin: 10}} />
          </label>
          <br></br>
          <input type="submit"
            value="Insert db"
            onClick={this.handleSubmit} />
        </form>
      <div>
        <h2>List of todos</h2>
        <TodoList data={this.state.todos} />
      </div>
    </div>
   )
  }
}


export default IndexPage

因此，正如我所说的那样，一切正常，在提交新的待办事项时，便会在firestore数据库中创建它，我可以在firebase控制台上看到它。新状态已更新（请注意，在设置新状态之前，我会执行map功能，以防止状态突变）。然后我的待办事项清单会正确更新。

我的问题出在chrome控制台上。每次启动项目时，在会话期间，我都会从xhr收到多个错误消息，说xmlHTTPRequest失败。我没有得到的部分是为什么xhr只是不对组件安装执行一个查询，在生命周期中查询WHEN何时更改数据库，而只是从组件Unmount上的db侦听器中取消查询。取而代之的是，我每15-30秒就会收到一次查询，而2/5会在chrome控制台上以失败告终。

以下是失败的许多请求标头之一的预览：

名称：使用我的Firestore数据库路径和凭据获取请求

状态：（失败）网络：： ERR_NETWORK_CHANGED

类型：xhr

启动器：Index.js

Request URL: 
https://firestore.googleapis.com/google.firestore.v1beta1.Firestore/
Listen/channel?database=[My_Project path]&gsessionid=[my_ID 
token]&VER=8&RID=rpc&SID=[My_SID 
token]=0&AID=120&TYPE=xmlhttp&zx=qe4fl1o41az5&t=2

Referrer Policy: no-referrer-when-downgrade

Provisional headers are shown
Origin: http://localhost:8000
Referer: http://localhost:8000/
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) 
AppleWebKit/604.1.38 (I'm on chrome devtool, iphone view).
(KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

database: [My_project_path/(default)]
gsessionid: [My_SID]
VER: 8
RID: rpc
SID: [my_ID]
CI: 0
AID: 120
TYPE: xmlhttp
zx: qe4fl1o41az5
t: 2

要完成此操作，错误正文如下所示：

    ./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
Vb  @   index.js:29
Promise.then (async)        
Tb  @   index.js:29
Ke  @   index.js:79
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
ad  @   index.js:37
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
Vb  @   index.js:29
Promise.then (async)        
Tb  @   index.js:29
Ke  @   index.js:79
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
ad  @   index.js:37
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
Vb  @   index.js:29
Promise.then (async)        
Tb  @   index.js:29
Ke  @   index.js:79
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
ad  @   index.js:37
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
Vb  @   index.js:29
Promise.then (async)        
Tb  @   index.js:29
Ke  @   index.js:79
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
ad  @   index.js:37
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
Vb  @   index.js:29
Promise.then (async)        
Tb  @   index.js:29
Ke  @   index.js:79
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
ad  @   index.js:37
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
Vb  @   index.js:29
Promise.then (async)        
Tb  @   index.js:29
Ke  @   index.js:79
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
ad  @   index.js:37
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous) @   index.js:33
setTimeout (async)      
Ec  @   index.js:33
Le  @   index.js:80
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.ta  @   index.js:87
hd  @   index.js:41
ad  @   index.js:38
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Sa  @   index.js:36
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.nb  @   index.js:35
Ab  @   index.js:23
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.dispatchEvent   @   index.js:21
ve  @   index.js:68
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.jb  @   index.js:67
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Na  @   index.js:67
XMLHttpRequest.send (async)     
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa  @   index.js:65
Xc  @   index.js:35
Yc  @   index.js:34
./node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa  @   index.js:81
(anonymous)

任何帮助将不胜感激。 谢谢。