无法使 react-leaflet 动态更新标记：它给出了 TypeError: Cannot read property 'leafletElement' of undefined

Question

我有表格，并且在单个选项卡（rc-tabs）中绘制了 react-leaflet 组件。 它们没有连接，而是 Redux。 我在表格中有带坐标的行。 当我单击该行时，坐标被传递到 Tab 组件，然后通过道具移动到 map 并被绘制。

好吧，它们应该是-当我通过坐标传递整个行数组时-它们绘制得很好，但是当我传递单个值时-我遇到了一些麻烦。

我有 testsData - 所有行都存储在其中，并且根据单击的行，我找到了索引。 当我传递给 Map testData[0] - 它画得很好。 当我尝试在 redux 的帮助下更改索引时 - 出现错误。 我使用带有索引的方法，在此之前我使用了另一种方法——我将整行传递到道具中——没有运气。

 const Map = (props) => {

    return (

        <LeafMap
            preferCanvas={true}
            zoom={zoom}
            style={mapHeightStyle}>
            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                       attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            />

                {props.tests.map(item => (
                    <Marker

                    className={item.id}
                    key={item.id}
                    position={item.coordinates[0], item.coordinates[1]}

                    }
                >
                    </Marker>

                ))}
            </FeatureGroup>
        </LeafMap>
    )
};

这是我的 Tabs 组件（我剪掉了一些代码！）

const Tabs = () => {

    let clickedTestRow = useSelector(state => state.deviceTestsTable.rowClicked);
    let testsData = useSelector(state => state.fetchTestsData.testsData);
    let [markers, setMarkers] = useState([]);
    let clickedTestRowIndex = 0;

    if (Object.keys(clickedTestRow).length) {
        clickedTestRowIndex = testsData.findIndex(x => x.id === clickedTestRow.id);

        if (!markers.includes(clickedTestRow)) {
            setMarkers(testsData[clickedTestRowIndex]]);
        }
    }



    // initial value - showing the first row on map

useEffect(() => {
        if (testsData.length > 0) {
            setMarkers([testsData[clickedTestRowIndex]]);
        }
    }, [testsData]);


    let props = {
        tests: markers
    };


    const tabs = [
        {key: 'Map', component: <Map {...props}/>, disabled: false},
    ];

我错过了什么？ 每次我有 TypeError: Cannot read property 'leafletElement' of undefined

Answer 1

知道了，抱歉，这真的很烦人 - 问题出在我的

mapRef.current.leafletElement.getBounds().contains(markerRef.current[item.id].leafletElement.getLatLng())) 

我提到项目的地方，看看它是否在界限内。 由于某种原因，当我动态更新 state 和数据时，leaflet 不喜欢它。 我很抱歉出现这个错误 - 我没有在上面输入它，因为我确定问题出在另一个地方......

谢谢@rfestag 和@kboul 的评论！