Reactjs 为什么不显示MarkerClusterGroup中的弹出窗口？

数据从服务器传输到json，收到数据后，我在地图上显示传单。因为有很多标记，我使用MarkerClusterGroup将它们合并到集群中，集群与标记一起出现，但是单击时弹出的窗口不显示信息，没有集群一切都正常。是谁干的？需要帮助，谷歌没有帮助

import React, {Component} from "react";
import MapService from "../../services/map-service";
import {Map, TileLayer, Marker, Popup} from "react-leaflet";
import MarkerClusterGroup from 'react-leaflet-markercluster';
import Spinner from "../../spinner";
import ErrorIndicator from "../../error-indicator";
import {ListGroup, ListGroupItem} from "react-bootstrap";
import "./geo-map.css";
import 'react-leaflet-markercluster/dist/styles.min.css';

export default class GeoMap extends Component {

   mapService = new MapService();

   state = {
    data: [],
    loading: true,
    error: false
};

componentDidMount() {
    this.updateMap();
}

onGeoDataLoaded = (data) => {
    this.setState({
        data: data,
        loading: false,
        error: false
    });
};

onError = (error) => {
    this.setState({
        error: true,
        loading: false
    })
};

updateMap() {
    this.mapService.getProjects().then(this.onGeoDataLoaded).catch(this.onError);
}

render() {

    const {data, loading, error} = this.state;

    const hasData = !(loading || error);
    const errorView = error ? <ErrorIndicator/> : null;
    const spinner = loading ? <Spinner/> : null;
    const mapView = hasData ? <MapView data={data}/> : null;

    return (
        <div className="geo-map">
            {errorView}
            {spinner}
            {mapView}
        </div>
    )
 }
}
const createMarkers = (data) => {
return data.data.map((item, index) => (
    <Marker key={item.id} position={[item.geoJson.coordinates[1], item.geoJson.coordinates[0]]}>
        <Popup maxWidth="auto">
            <ListGroup variant="flush">
                <ListGroupItem>
                    <strong>Наименование</strong><br/>
                    {item.name}
                </ListGroupItem>
                <ListGroupItem>
                    <strong>Дата закрытия контракта</strong><br/>
                    {item.endDate}
                </ListGroupItem>
                <ListGroupItem>
                    <strong>Заказчик</strong><br/>
                    {item.contractor}
                </ListGroupItem>
                <ListGroupItem>
                    <strong>Номер договора</strong><br/>
                    {item.contractNumber}
                </ListGroupItem>
                <ListGroupItem>
                    <strong>Путь к полевым мат.</strong><br/>
                    {item.dataPathRequest}
                </ListGroupItem>
                <ListGroupItem>
                    <strong>Путь к камер. мат.</strong><br/>
                    {item.dataPathResponse}
                </ListGroupItem>
                <ListGroupItem>
                    <strong>Путь к паспорту </strong><br/>
                    {item.passportPath}
                </ListGroupItem>
            </ListGroup>
        </Popup>
    </Marker>
))
};
const MapView = (data) => {
console.log("Data from state", data);
const markers = createMarkers(data);
return (
    <Map center={[39.90, 48.98]} zoom={4} maxZoom={22} attributionControl={true} zoomControl={true}
         doubleClickZoom={true} scrollWheelZoom={true} dragging={true} animate={true} easeLinearity={0.35}>
        <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>
        <MarkerClusterGroup>
            {
                markers
            }
        </MarkerClusterGroup>
    </Map>
)
};

import React，{Component}来自“React”；
从“../../services/map service”导入地图服务；
从“反应传单”导入{Map，tillelayer，Marker，Popup}；
从“react传单markercluster”导入MarkerClusterGroup；
从“../../Spinner”导入微调器；
从“../../error indicator”导入ErrorIndicator；
从“react bootstrap”导入{ListGroup，ListGroupItem}；
导入“/geo-map.css”；
导入“react-传单标记聚类/dist/styles.min.css”；
导出默认类GeoMap扩展组件{
mapService=新的mapService（）；
状态={
数据：[]，
加载：对，
错误：false
};
componentDidMount（）{
这个.updateMap（）；
}
onGeoDataLoaded=（数据）=>{
这是我的国家({
数据：数据，
加载：false，
错误：false
});
};
onError=（错误）=>{
这是我的国家({
错误：正确，
加载：错误
})
};
更新映射（）{
this.mapService.getProjects（）.then（this.onGeoDataLoaded）.catch（this.onError）；
}
render（）{
const{data，loading，error}=this.state；
const hasData=！（加载| |错误）；
const errorView=错误？：空；
常量微调器=加载？：空；
常量mapView=hasData？：空；
返回(
{errorView}
{spinner}
{mapView}
)
}
}
常量createMarkers=（数据）=>{
返回data.data.map（（项目，索引）=>(

{item.name}
ааазааааааааааааа107
{item.endDate}

{项目.承包商}

{item.contractNumber}

{item.dataPathRequest}
Пааааааа.Маа。

{item.dataPathResponse}
Пааааааааа
{item.passportPath}
))
};
常量映射视图=（数据）=>{
日志（“来自状态的数据”，数据）；
常量标记=创建标记（数据）；
返回(
{
标记
}
)
};

---

何时填充？大多数可能的数据在提取期间为空或未定义，并且在一段时间后由于异步操作而被填充。@kboul数据不是空的，因为没有集群，所有内容都能正确显示。即使在MarkerClusterGroup中使用纯文本，也不会显示弹出窗口，但您有第二张显示弹出窗口的图片。如果您创建了一个codesandbox或类似的东西来重现这个问题，这将非常有用。@kboul-有一个指向的链接github@kboul非常感谢，我从codesandbox转移到本地项目，我从服务器接收数据，所有内容都正确显示，但老实说，我不明白这是怎么发生的