не может создать ответную листовку для динамического обновления маркеров: она дает TypeError: невозможно прочитать свойство leafletElement из undefined - PullRequest
Новая
       39

не может создать ответную листовку для динамического обновления маркеров: она дает TypeError: невозможно прочитать свойство leafletElement из undefined

0 голосов
/ 14 апреля 2020

У меня есть таблица, и у меня есть компонент реакционной листовки, нарисованный на одной вкладке (r c -tabs). Они не связаны, но Redux. У меня есть строки в таблице с координатами. Когда я нажимаю на строку, координаты передаются в компонент Tab, а затем через реквизиты перемещаются на карту и отрисовываются.

Ну, они должны быть - когда я передаю весь массив строк с координатами - они нарисовано просто отлично, но когда я передаю отдельные значения - у меня возникают некоторые проблемы.

У меня есть testsData - где хранятся все строки и, в зависимости от того, какая строка нажата, я нахожу индекс. Когда я перехожу к Map testData [0] - он рисуется нормально. Когда я пытаюсь изменить индекс с помощью приставки - я получаю ошибку. Я использую подход с индексом, а до этого я использовал другой - где я пропустил всю строку в подпорки - не повезло. 

 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' из неопределенного

1 Ответ

0 голосов
/ 15 апреля 2020

Понял! Извините, это действительно раздражало - проблема была в моем 

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

, где я ссылался на элемент, чтобы увидеть, находится ли он в пределах границ. По какой-то причине листовке не понравилось, когда я обновлял состояние и данные динамически. Мне очень жаль иметь эту ошибку - я не напечатал ее выше, потому что был уверен, что проблема в другом месте ...

Спасибо, @rfestag и @kboul за комментарии!

...