尽管我的firebase代码是100%正确的(React)，但我的状态仍然为null

Question

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

我正试图获取数据并将它们保存到名为"；问题"；，我犯了一个错误；问题"即使在检查了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;

Answer 1

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

同时，组件将继续以{ Questions: null }的初始状态进行渲染。事实上，在第一次渲染期间，最初已将null放置到位，这正是错误消息试图告诉您的。调用setState后，该组件将再次呈现，但在查询完成之前，您应该添加代码来决定在初始null值存在时要呈现的内容。许多人使用微调器或其他加载指示器。