无法使react-leaflet动态更新标记：它给出TypeError：无法读取未定义的属性'leafletElement'

Question

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

嗯，当我传递带有坐标的行的整个数组时，它们会被很好地绘制，但是当我传递单个值时，我会遇到一些麻烦。

我有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：无法读取未定义的属性'leafletElement'

Answer 1

知道了！抱歉，这真令人讨厌-问题出在我的Popup中，我提到了item，出于某种原因，传单不喜欢它！哇..

                <Popup>
                  <span>{item.model} {item.serial}</span>
                </Popup>