React-Leaflet 无法通过获取输入标记位置 API

Question

我尝试通过将 API 提取到地图中来输入标记位置，但不起作用。

这是我的组件代码。

import React, { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Marker } from 'react-leaflet'

const Map = () => {

    const [parcels, setParcels] = useState([])
    const center = [14.881999606787934, 102.02071765448805]

    useEffect(async () => {
        try {
            const res = await fetch('http://localhost:3000/api/parcels/all')
            const getParcels = await res.json()
            setParcels(getParcels)
        } catch (e) {
            setParcels(e)
        }
    }, [])

    const position = parcels.map((parcel) => {
        return [parcel.location.coordinates[1], parcel.location.coordinates[0]]
    })

    return (
        <div>
            <MapContainer center={center} zoom={15} scrollWheelZoom={false} className="h-screen">
                <TileLayer
                    attribution='&copy; Taxmap'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={position[0]}></Marker>
            </MapContainer>
        </div>
    )
}

export default Map

来自控制台的错误消息。

如果我使用console.log() 来查看位置[0]。看起来很正常。

console.log(position[0])
// result = [14.8763983, 102.0169941]

但是当我正常创建变量时。它可以工作。

const positionButArray = [14.8763983, 102.0169941]

return (
        <div>
            <MapContainer center={center} zoom={15} scrollWheelZoom={false} className="h-screen">
                <TileLayer
                    attribution='&copy; Taxmap'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={positionButArray}></Marker>
            </MapContainer>
        </div>
      )

上面的结果。

如果有人有解决办法请帮助我。谢谢

Answer 1

我已经通过添加一个三元运算符来检查位置是否被渲染来解决了这个问题。如果位置被呈现，它将去 return 标记标签。这是我的解决方案。

return (
        <MapContainer center={center} zoom={15} scrollWheelZoom={false} className="h-screen">
            <TileLayer
                attribution='&copy; Taxmap'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            {positions? <Marker position={positions[0]}></Marker>:null}
        </MapContainer>
    )

React-Leaflet 无法通过获取输入标记位置 API

React-Leaflet can't input marker position from fetching API

reactjs

react-leaflet