我正在尝试从 firestore 数据库获取数据并将其显示在组件中。我已经与数据库建立了连接。我可以在控制台日志中查看数据库中的数据。但我似乎无法在组件初始构建后更新反应组件状态。我是个新手,无法做出反应,不知道发生了什么。下面是我的组件代码。
我尝试将数据库调用移至子组件。并且有同样的问题。我尝试构建具有初始状态的组件,该状态看起来像数据库中的数据。我尝试删除对标记数据的检查以验证它是否未定义。而且我仍然不明白问题出在哪里。
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='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' …Run Code Online (Sandbox Code Playgroud)