文章/答案/技术大牛

发布

社区首页 >问答首页 >React-Leaflet:无法从React上下文动态创建折线

问React-Leaflet:无法从React上下文动态创建折线
EN

Stack Overflow用户

提问于 2021-05-26 11:55:37

回答 2查看 408关注 0票数 0

更新！就像Seth Luke问的，为什么是一个裁判而不是一个状态，所以我就这么做了，现在就画出了界限！但是落后了一步。看看下面这几行：

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

上下文中的“行”正在更新，比本地状态“zonePolygon”晚了一步...我该如何纠正这个问题呢？即使我切换呼叫，它也是一样的，上下文会有延迟地更新...

原文：

我连接到我的主map组件中的一个上下文，其中包含一个。我正在更改来自另一个组件的上下文，希望我的地图容器组件更新并重新渲染折线，但这并没有发生。我在这里做错了什么？我真的厌倦了阅读和尝试各种东西超过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);
    }, [lines]); // This is not being called, 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, {useState, useEffect, 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, drawing, 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, {useState, useEffect, 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;

reactjs

use-effect

polyline

react-leaflet

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-05-27 07:16:03

看起来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]);

票数 0

Stack Overflow用户

发布于 2021-05-26 22:34:41

我看不出有什么异常。但是可以尝试将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;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67698314

复制

相似问题

问React-Leaflet:无法从React上下文动态创建折线
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React-Leaflet:无法从React上下文动态创建折线EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React-Leaflet:无法从React上下文动态创建折线
EN