Reactjs 如何在从firestore数据库获取数据时修复react中的状态更新

我试图从firestore数据库中获取数据，并将其显示在组件中。我已经与数据库建立了连接。我可以在控制台日志中查看数据库中的数据。但在组件的初始构造之后，我似乎无法更新react组件状态。我是个新来的反应者，不知道发生了什么。下面是我的组件代码

我已尝试将数据库调用移动到子组件。也有同样的问题。我已经尝试过用一个初始状态构建组件，它看起来像来自数据库的数据。我已尝试删除对标记数据的检查，以验证其是否未定义。我还是不知道问题出在哪里

import React, { Component } from 'react'
import { Map, TileLayer } from 'react-leaflet'
import MarkerList from './MarkerList'
import './Basemap.css'
import firebase from '../../config/fbConfig'

class Turmap extends Component {
constructor(){
super();
this.state={
  mapdata:[]
}
};

componentDidMount(){
 const db = firebase.firestore();
 var turmarkers =[];

db.collection("Markets").get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {        
    turmarkers.push(doc.data())

  })
}
);    
  this.setState({
    mapdata:turmarkers
   }) 
}

render() {

var markers  = this.state.mapdata;    
return (
  <div>
    {this.state.mapdata.length}
      <Map className='map' center={[21,79]} zoom={4.3}>
      <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
          {this.state.mapdata.length>0 && <MarkerList markers = {markers} />}  

      </Map>

  </div>
)
 }
 }
 export default Turmap

import React，{Component}来自“React”
从“反应传单”导入{Map，tillelayer}
从“./MarkerList”导入MarkerList
导入“./Basemap.css”
从“../../config/fbConfig”导入firebase
类Turmap扩展组件{
构造函数（）{
超级（）；
这个州={
地图数据：[]
}
};
componentDidMount（）{
const db=firebase.firestore（）；
var=[]；
db.collection（“Markets”）.get（）.then（（querySnapshot）=>{
querySnapshot.forEach（（doc）=>{
turmarkers.push（doc.data（））
})
}
);    
这是我的国家({
地图数据：图尔马克
}) 
}
render（）{
var markers=this.state.mapdata；
返回(
{this.state.mapdata.length}
{this.state.mapdata.length>0&&}
)
}
}
导出默认Turmap

---

我的firestore收藏中有两个文档。我希望在加载组件后，componentdidMount将为mapdata执行setstate。更新后的状态将重新渲染组件。但是this.state.mapdata中的更新状态不会重新呈现组件。因此this.state.mapdata的长度始终为0，并且不会更改数据库中的数据量，即2

Move

this.setState

在db回调内部（如果将其放在db回调外部，它将在db调用完成之前执行）

componentDidMount() {
    const db = firebase.firestore();
    var turmarkers =[];

    db.collection("Markets").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {        
            turmarkers.push(doc.data())

         });

        this.setState({
            mapdata:turmarkers
        });
    });    
}