react/react-leaflet 不立即加载信息

如何解决react/react-leaflet 不立即加载信息

Example of issue

import firebase from 'firebase/app';
import { MapContainer,TileLayer,Marker,Popup } from 'react-leaflet';
import { OpenStreetMapProvider } from 'leaflet-geosearch'
import SearchControl from "./SearchControl";

const userId = sessionStorage.getItem('uid')
const fullNames = []
const provider = new OpenStreetMapProvider()
var vendors = []

const VendorMap = (props) => {
    firebase.firestore().collection("vendors")
        .where('belongsTo','==',userId)
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach((doc) => {
                if(fullNames.includes(doc.data().fullName) == false) {
                    fullNames.push(doc.data().fullName)
                    provider.search({query: doc.data().address}).then(function (result) {
                        vendors.push([doc.data(),[result[0].y,result[0].x]])
                    }).catch((error) => {
                        console.log("Error getting collection: ",error)
                    })
                }
            })
        }).catch((error) => {
            console.log("Error getting collection: ",error)
        })

    return (
        <MapContainer center={[51.505,-0.09]} zoom={3} scrollWheelZoom={true}>
            <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <SearchControl provider={provider} showMarker={true} showPopup={true} popupFormat={({ query,result }) => result.label} maxMarkers={3} retainZoomLevel={false} animateZoom={true} autoClose={false} searchLabel={"Address to search for..."} keepResult={true} />
            {vendors.map((vendor) => 
                <Marker key={vendor[0].fullName} position={[vendor[1][0],vendor[1][1]]}>
                    <Popup>
                        <span>{vendor[0].fullName}</span>
                    </Popup>
                </Marker>
            )}
        </MapContainer>
    )
}

export default VendorMap

上面的链接是我的问题的视频（只有 10 秒）。 React 不会在每次加载时立即加载所有地图标记。有时所有标记都加载，有时只有 1 个加载，我必须单击导航栏链接才能加载其余标记。

我不明白可能是什么问题，因为我将所有标记一个接一个地添加到地图中。 React 似乎也没有正确地从 firestore 加载信息，因为当我登录网站时，我必须在信息开始加载之前完全刷新网站。

如果有人了解我可能做错了什么以及如何解决这个问题，那就太好了！我对 NodeJS 和 ReactJS 真的很陌生，所以请原谅我的任何常见问题。

解决方法

我无法重现您的问题，但您需要更改的前两件事是：

1. 将异步操作放在 useEffect 钩子中，以便在页面加载时只加载一次。
2. 使用 useState 钩子来存储从异步操作接收的数据内部 VendorMap 组件，因为将数据存储在功能组件外部的变量中，就像您所做的那样，可能会像 React 一样产生意想不到的结果不知道何时更新 DOM 并将旧值与新值进行比较。

结果使用 useState 钩子创建一个局部变量

const [vendors,setVendors] = useState([]);

useEffect(() => {
   firebase.firestore().collection("vendors")
        .where('belongsTo','==',userId)
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach((doc) => {
                if(fullNames.includes(doc.data().fullName) == false) {
                    fullNames.push(doc.data().fullName)
                    provider.search({query: doc.data().address}).then(function (result) {               
                       setVendords(yourVariable) // update the vendors array
                    }).catch((error) => {
                        console.log("Error getting collection: ",error)
                    })
                }
            })
        }).catch((error) => {
            console.log("Error getting collection: ",error)
        })
},[]);

在 setVendors 内更新供应商变量。我不确定您收到的数据是我没有输入确切值的原因

3. 如果您像 fullNames 一样更新 vendors，请遵循与 vendors 变量相同的模式。