来自 API 的 GeoJSON 不会与 react-leaflet 一起显示

Question

我正在进行 Ajax API 调用以接收包含多个多边形的 GeoJSON。这一切都很好，它们被设置为我的 <GeoJSON /> 的“数据”。我的地图组件看起来像这样：

const [features, setFeatures] = useState([]);

let handleFeatureAPI = () => {
        axios
        .get("/api/polygons/")
        .then((res) => setFeatures(res.data))
        .catch((err) => console.log(err));
    }

useEffect(()=>{  // Placeholder
        handleFeatureAPI()
    }, [])

return (

....
    <MapContainer center={lat_lon} zoom={11} scrollWheelZoom={true} zoomControl={false} onClick={handleDrawerClose}>
         <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
                />
         {features && (<GeoJSON style={polystyle} data={features} onEachFeature={onEachFeature} />)}                
    </MapContainer>

我知道我必须“重新加载”<GeoJSON/> 组件并尝试仅在 {features && (<GeoJSON/>)} 可用时才显示它，但这不起作用。我做错了什么？

Answer 1

我确实自己解决了，但是注意：它可能仍然不是最佳实践。

结合使用 useEffect 和 useRef 解决了这个问题，只加载 <GeoJSON /> 一次。

const [features, setFeatures] = useState([]);

const fetchData = () => {
        setLoading(true);
        axios.get("/api/polygons/")
            .then((res) => {
                setLoading(false);
                setFeatures(res.data);
            })
            .catch((err) => {
                setLoading(true);
                console.log(err)
            });

    };





const geoJsonLayerRef = useRef(null);

useEffect(() => { fetchData() }, []);


useEffect(() => {
        const layer = geoJsonLayerRef.current;
        if (layer) {
            console.log("redrawing")
            layer.clearLayers().addData(features);
        }
    }, [features]);


return ( ....

<MapContainer center={city_lat_lon} zoom={11} scrollWheelZoom={true} zoomControl={false} onClick={handleDrawerClose}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
                />
                <GeoJSON ref={geoJsonLayerRef} style={polystyle} data={features} onEachFeature={onEachFeature} />
            </MapContainer> .....)

来自 API 的 GeoJSON 不会与 react-leaflet 一起显示

GeoJSON from API won't show with react-leaflet

javascript

ajax

leaflet

reactjs

react-leaflet