Reactjs 无法设置Firestore数据的状态
我正在与Cloud Firestore合作一个React项目。我已成功从Firestore获取数据。但我无法将这些数据设置为state 如何设置这些数据的状态Reactjs 无法设置Firestore数据的状态,reactjs,firebase,google-cloud-firestore,Reactjs,Firebase,Google Cloud Firestore,我正在与Cloud Firestore合作一个React项目。我已成功从Firestore获取数据。但我无法将这些数据设置为state 如何设置这些数据的状态 class App extends Component { constructor(props) { super(props); this.state = { items: [] }; } async componentDidMount() { const items = [];
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: []
};
}
async componentDidMount() {
const items = [];
firebase
.firestore()
.collection("items")
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
items.push(doc.data());
});
});
this.setState({ items: items });
}
render() {
const items = this.state.items;
console.log("items", items);
return (
<div>
<div>
<ul>
{items.map(item => (
<li>
<span>{item.name}()</span>
</li>
))}
</ul>
</div>
);
}
}
export default App;
你应该这样设置状态
firebase
.firestore()
.collection("items")
.get()
.then((querySnapshot) => { //Notice the arrow funtion which bind `this` automatically.
querySnapshot.forEach(function(doc) {
items.push(doc.data());
});
this.setState({ items: items }); //set data in state here
});
组件首先使用初始状态呈现,初始项:[]。您必须检查数据是否存在
{items && items.length > 0 && items.map(item => (
<li>
<span>{item.name}()</span>
</li>
))}
仅供参考,backtick引用是为了说明代码位,而不是为了强调或突出产品名称。非常感谢!我能做到!