Javascript 虽然我的firebase代码100%正确，但我的状态仍然为空（React）

我制作了一个react类组件来处理从firebase cloudstore检索到的问题，firebase是100%正确的，并且在我在类组件中实现它之前工作良好

我试图获取数据并将其保存到名为“Questions”的状态，我得到的错误是“Questions”即使在检查firebase代码是否完全正确后仍然为空

import './App.css';
import React, { Component } from "react";
import firebase from 'firebase';
const Config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  
  }
  
  
  firebase.initializeApp(Config);
 class Quiz extends Component{
  constructor() {
    super();
    this.state = {
      Questions: null,

      }
  };
  componentDidMount() {
    const db = firebase.firestore();
    const questionsRef = db.collection('questions');
    questionsRef.get().then((snapshot)=>{
    
      const data=snapshot.docs.map((doc)=>({
        id:doc.id,
        ...doc.data(),
      }));
      console.log(data)
      this.setState({ Questions:data });
    });
  }
  render() {
  return (
    <div className="container">
    <div className="row">
      <div className="col-md-8">
        <div className="card">
          <div className="card-header">
            Question
            <span className="float-right">
              Current Score
              <span className="badge badge-warning">

              </span>
            </span>
          </div>
          <div className="card-body">
            <h5 className="card-title">
              {this.state.Questions.questions}
            </h5>
            <div>
              <ul>
                {this.state.Questions.questions.options.map(option => (
                  <li key={option.A}>
                    <input
                      type="radio"
                      name="answer"
                      value={option.A}
                  
                      
                    />{" "}
                    {option.A}
                  </li>
                ))}
              </ul>
            </div>
            <div className="row">&nbsp;</div>
            <button
              className="btn btn-primary"
              
            >
              Submit Answer
            </button>
          </div>
        </div>
      </div>
      <div className="col-md-4">
        <div className="card">
          <div className="card-header">High Scores</div>
          <ul className="list-group list-group-flush">
            <li>
            <span>
                      </span>
                    </li>
               
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  );
}
}
 

export default Quiz;

import'/App.css'；
从“React”导入React，{Component}；
从“firebase”导入firebase；
常量配置={
apiKey:“，
authDomain:“”，
数据库URL:“”，
投射：“，
storageBucket:“”，
messagingSenderId:“”，
appId:“
}
firebase.initializeApp（配置）；
类扩展组件{
构造函数（）{
超级（）；
此.state={
问题：空，
}
};
componentDidMount（）{
const db=firebase.firestore（）；
const questionsRef=db.collection（'questions'）；
questionsRef.get（）。然后（（快照）=>{
const data=snapshot.docs.map（（doc）=>({
id:doc.id，
…doc.data（），
}));
console.log（数据）
this.setState（{问题：数据}）；
});
}
render（）{
返回(
问题:
当前分数
{this.state.Questions.Questions}

{this.state.Questions.Questions.options.map（option=>(

{" "}
{option.A}

))}

提交答案
高分




);
}
}
导出默认测验；

Firestore查询是异步的。当您调用get（）时，它将立即返回，并且在查询完成后的一段时间内将调用来自返回的承诺的回调。无法保证需要多长时间

---

同时，组件继续以

{Questions:null}

的初始状态呈现。在第一次渲染期间，您最初将

null

设置在适当的位置，这是错误消息试图告诉您的。调用

setState

后，组件将再次渲染，但在查询完成之前，您应该添加代码以确定在初始空值存在时要渲染的内容。许多人使用微调器或其他加载指示器。

Firestore查询是异步的。当您调用get（）时，它将立即返回，并且在查询完成后的一段时间内将调用来自返回的承诺的回调。无法保证需要多长时间

同时，组件继续以

{Questions:null}

的初始状态呈现。在第一次渲染期间，您最初将

null

设置在适当的位置，这是错误消息试图告诉您的。调用

setState

后，组件将再次渲染，但在查询完成之前，您应该添加代码以确定在初始空值存在时要渲染的内容。许多人使用旋转器或其他装载指示器