React-Leaflet：无法从 React 上下文动态创建折线

问题描述

更新！正如 Seth Luke 所问的，为什么是 ref 而不是状态，所以我这样做了，现在界限已经画好了！但落后一步。看看这些行：

useEffect(()=>{
        if (drawing) {
                setZonepolygon((prev)=>[...prev,[clickLocation.lat,clickLocation.lng]]);
                setContextData((prevContext)=>({...prevContext,lines: zonepolygon}));
                addZoneMarker();
            }
        },[clickLocation]);

上下文中的“行”在本地状态“zonepolygon”之后更新了一步……我该如何纠正？即使我切换呼叫，它也是一样的，上下文会延迟更新......

原帖：

我已连接到主地图组件中的上下文，其中包含 .我正在从另一个组件更改上下文，希望我的地图容器组件更新并重新渲染折线，但它没有发生。我在这里做错了什么？我真的厌倦了阅读和尝试各种东西超过 15 个小时没有休息。有人可以帮忙吗？我真的很感激。

我的目标是让用户点击地图上的不同点并将这些点与一条线连接起来，这样我就可以将其保存为一个区域或“区域”。

这不是被调用，我不知道为什么！我正在使用 react 开发工具进行调试，上下文确实得到了更改，但它没有在组件中触发......太奇怪了。

useEffect(()=>{
            console.log('Lines updated in Map component via Context.',lines);
        },[lines]); // This is not being called,I wonder why!!! ****

这是我的代码：

import React,{useState,useEffect,useContext,useRef} from 'react';
import {MapContainer,Marker,polyline,polygon,useMapEvent} from 'react-leaflet';
import 'leaflet-rotatedmarker';
import {MapContext} from '../../context/MapProvider';
import Layers from './Layers';
import Ships from '../Ships';

const Map = () => {
    const [map,setMap] = useState(null);
    const {contextData,setContextData} = useContext(MapContext);
    const {clickLocation,drawing,lines} = contextData;
    const [shipData,setShipData] = useState();
        
    useEffect(()=>{
        console.log('Lines updated in Map component via Context.',lines);
    },I wonder why!!! ****



    useEffect(()=>{
        if (!map) return;
        setContextData({...contextData,mapRef: map});
    },[map]);

    useEffect(() => {
        setShipData(contextData.vessels);
    },[contextData.vessels]);

    function MapEvents() {
        const map = useMapEvent('click',(e) => {
        setContextData({...contextData,clickLocation: e.latlng});
        });
        return null;
    }

    // const ZONE = [
    //  [-41.95208616893812,-73.52483926124243],//  [-42.246913395396184,-73.17047425039003],//  [-42.19905906325171,-72.68013196793146],//  [-41.936746304733255,-72.81473573174362],//  [-41.8118450173935,-73.22404105435608],// ]

    return (
        <MapContainer
                center={[-42,-73]} 
                zoom={10}   
                style={{height: '100%',width: '100%'}} 
                whenCreated={setMap}>
            <MapEvents />
            <Layers />      
            <Ships data={shipData} />
            {
                (drawing & lines.length > 1) ? <polyline positions={lines} /> : null
            }
        </MapContainer>
    )
}

export default Map;

这是我修改上下文的地方：

import React,useRef,useContext} from 'react';
import L from 'leaflet';
import styles from '../../styles.module.scss';
import ZoneItem from './ZoneItem';
import { MapContext } from './../../../../context/MapProvider';

const ZonesBar = () => {
    const {contextData,setContextData} = useContext(MapContext);
    const {mapRef,lines,clickLocation} = contextData;
    const [zones,setZones] = useState([]);
    const [zoneMarkers,setZoneMarkers] = useState([]);
    let zonepolygon = useRef([]);

    useEffect(()=>{
        if (drawing) {
            setContextData((contextData)=>({...contextData,lines: []}));
            zonepolygon.current = [];
        } else if (!drawing) {
            if (zonepolygon.current.length > 2) {
                setContextData((prevContext)=>({...prevContext,zones: [...prevContext.zones,contextData.lines]}));
                setZones((prevZones)=>([...prevZones,zonepolygon.current]));
                clearMarkers();
            }
        }
    },[drawing]);

    useEffect(()=>{
        if (drawing) {
                zonepolygon.current.push([clickLocation.lat,clickLocation.lng]);
                setContextData((prevContext)=>({...prevContext,lines: zonepolygon.current}));
                addZoneMarker();
            }
        },[clickLocation]);

    function toggleDrawing() {
        setContextData((prevContext)=>({...prevContext,drawing: !prevContext.drawing}))
    }

    function addZoneMarker() {
        const newMarker = L.marker([clickLocation.lat,clickLocation.lng])
            .addTo(mapRef);
        setZoneMarkers((prevMarkers)=>([...prevMarkers,newMarker]));
    }

    function clearMarkers() {
        zoneMarkers.forEach(m => mapRef.removeLayer(m));
    }

    return (
        <div className={styles.zones}>
            <button 
                className={`${styles.btn_add} ${drawing ? styles.btn_drawing : ''}`}
                onClick={toggleDrawing}
                >
                    {drawing ? 'Agregar zona' : 'Definir zona'}
            </button>
            <span style={{fontSize: '0.7rem',fontStyle: 'italic',marginLeft: '0.5rem',}}>
                {drawing ? 'Dar clicks en el mapa para definir la zona,luego presionar el botón otra vez.' : ''}
            </span>

            <div className={styles.list}>
            {
                    zones.length > 0 ?
                    zones.map(zone => <ZoneItem data={zone} />)
                    :
                    'Lista vacía.'
                }                       
            </div>
        </div>  
    )
}

export default ZonesBar;

从今天早上 9 点开始，我已经改变了很多事情，我不再知道其他任何事情了。显然有一种方法可以做到这一点，我确实需要一些帮助。如果你能花点时间解决这个问题，那对我来说就是救命稻草。这是看起来的样子，看看当我用硬编码数组渲染它时，折线出现了。

这是我的背景：

import React,createContext,useContext} from 'react'
import io from 'socket.io-client'
import axios from 'axios';

export const MapContext = createContext();
const socket = io("http://localhost:3001");

const MapProvider = ({children}) => {
    const [contextData,setContextData] = useState({
        mapRef: null,clickLocation: [],markers: [],zones: [],drawing: false,lines: [],vessels: []
    });
    
    // Bring vessels info from API and store in Context.
    useEffect(()=>{
        axios.get('http://localhost:3001/vessel/search/all')
        .then(res => {
            setContextData((prevContext)=>({...prevContext,vessels: res.data}));
        })
        .then(()=>{
            socket.on('vessels',data => {
            setContextData((prevContext)=>({...prevContext,vessels: data}));
            })
        })
        .catch(err => console.log(err.message));
    },[]);

    return (
        <MapContext.Provider value={{contextData,setContextData}}>
            {children}
        </MapContext.Provider>
    )
}

export default MapProvider;

解决方法

我看不出任何异常。但是尝试将 MapEvents 移到 Map 组件之外。类似的东西

function MapEvents() {
   const {contextData,setContextData} = useContext(MapContext);

   const map = useMapEvent('click',(e) => {
       setContextData({...contextData,clickLocation: e.latlng});
     });

   return null;
}

const Map = () => {
    const [map,setMap] = useState(null);
    const {contextData,setContextData} = useContext(MapContext);
    const {clickLocation,drawing,lines} = contextData;
    const [shipData,setShipData] = useState();
    const linesForPolyline = useRef();

    useEffect(()=>{
        console.log('Lines updated in Map component via Context.',lines);
    },[lines]);

    useEffect(()=>{
        if (!map) return;
        setContextData({...contextData,mapRef: map});
    },[map]);

    useEffect(() => {
        setShipData(contextData.vessels);
    },[contextData.vessels]);


    // const ZONE = [
    //  [-41.95208616893812,-73.52483926124243],//  [-42.246913395396184,-73.17047425039003],//  [-42.19905906325171,-72.68013196793146],//  [-41.936746304733255,-72.81473573174362],//  [-41.8118450173935,-73.22404105435608],// ]

    return (
        <MapContainer
                center={[-42,-73]} 
                zoom={10}   
                style={{height: '100%',width: '100%'}} 
                whenCreated={setMap}>
            <MapEvents />
            <Layers />      
            <Ships data={shipData} />
            {
                (drawing & lines.length > 1) ? <Polyline positions={lines} /> : null
            }
        </MapContainer>
    )
}

export default Map;

看起来像 Seth Lutske 在对原始问题的评论中所建议的加上一些调整来解决问题。我希望他可以将其作为答案发布，以便我接受它作为解决方案。

基本上解决方案是使用状态钩子：

const [zonePolygon,setZonePolygon] = useState([]);

代替 useRef：

const zonePolygon = useRef();

然后更新本地状态和全局上下文，以便我将它们拆分为不同的 useEffects。这是工作代码，但我认为它需要重构：

useEffect(()=>{
        if (drawing) {
            setZonePolygon((prev)=>[...prev,[clickLocation.lat,clickLocation.lng]]);
            addZoneMarker();
        }
    },[clickLocation]);

    useEffect(()=>{
        setContextData((prevContext)=>({...prevContext,lines: zonePolygon}));
    },[zoneMarkers]);

polyline polyline react-leaflet reactjs reactjs reactjs reactjs use-effect