Почему React Yandex Maps зависает?

Question

[Ислом Жуманиёзов]

В Next.js я испоьзую библиотеку @pbe/react-yandex-maps. И время от времени карта зависает с ощибкой.

Код выглядит следующим образом

const MapBox = () => {
    const setID = useApzSingleStore(state => state.setID);
    const openModal = useObjectInfoModalStore(state => state.openModal);

    const queryClient = useQueryClient()
    // const queryClient =  useQueryClient();

    const filterData = useApzFilterStore(state => state.filtersData);
    const {coordinates, zoomRange, sateliteType} = useMapStore(state => state);
    //
    const {data, isFetching} = useQuery<APZFetchResult, Error, APZFetchResult>({
        queryKey: ['apz', filterData],
        queryFn: () => getApzs(filterData.region_code, filterData.city_code, filterData.industry_id),
        initialData: {
            result: {
                meta: {
                    total_count: 0,
                    page_count: 0
                },
                data: []
            }
        },
    })


    const handleBoundsChange = (evt: any) => {
        evt.preventDefault()

    };

    return (

        <>
            <YMaps query={{apikey: "04a2b616-4585-4db3-94fc-20e5febb0181", mode: "release"}}>
                <FilterMenu/>
                <ObjectInfo/>
                {isFetching ? <Loader/>
                    :

                    <Map className="w-full h-full"
                         state={{center: coordinates, zoom: zoomRange, type: sateliteType, behaviors: ["default"]}}
                         modules={["geolocation", "geocode", "control.GeolocationControl"]}
                         onBoundsChange={handleBoundsChange}
                    >
                        <ObjectManager
                            onClick={async (e: any) => {
                                const id = e.get('objectId')
                                if (typeof id === "number") {
                                    setID(id);
                                    openModal();
                                }
                            }}
                            onMouseEnter={async (e: any) => {
                                const id = e.get('objectId');
                                if (typeof id === "number") {
                                    const data = await queryClient.prefetchQuery({
                                        queryKey: ['apzsingle', id],
                                        queryFn: () => getSingleApz(id),
                                        staleTime: 300 * 1000, // only prefetch if older than 10 seconds
                                    })
                                }
                            }}
                            options={{
                                clusterize: true,
                            }}

                            objects={{
                                preset: "islands#blueDotIcon"
                            }}
                            clusters={{
                                preset: "islands#blueClusterIcons",
                            }}
                            defaultFeatures={data.result.data.map((el: APZ) => ({
                                    type: "Feature",
                                    id: el.id,
                                    geometry: {
                                        type: "Point",
                                        coordinates: [el.lat, el.long],
                                    },

                                }
                            ))}
                        />
                    </Map>
                }
            </YMaps>
        </>
    )
}

export default MapBox;

Ощибка в консоли:

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2582)
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2549)
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2620)
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2620)
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2620)
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2620)
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2620)
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2620)
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2620)
    at Object._getPosition (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1375:2620)

Uncaught Error: map.action.Continuous: ticking while inactive. browser:Chrome behavior:drag
    at o.tick (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:593:378)
    at o.tick (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:4:634)
    at o._onDragMove (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:7:3167)
    at s._callListeners (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:148:2983)
    at s.fire (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:148:1002)
    at s.fire (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:149:694)
    at Object._fireEvent (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1427:3157)
    at Object._onMouseMove (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:1427:1806)
    at s._callListeners (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:148:2983)
    at s.fire (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:148:1002)

Uncaught Error: map.action.Continuous: ticking while inactive. browser:Chrome behavior:scrollZoom
    at o.tick (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:593:378)
    at o.tick (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:4:634)
    at o._tick (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:24:3274)
    at o._onWheel (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:24:2262)
    at r._callListeners (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:148:2983)
    at r.fire (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:148:1002)
    at r.fire (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:149:1103)
    at n.fire (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:150:512)
    at s.fire (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:149:775)
    at s.fire (full-70275b62ece2fd2ab62f973df06797d58e0c96b5.js:149:775)

Comments

[szQocks]

да уж, представляю там сколько лишних ререндеров у тебя в твоей карте, не удивительно что там какой-то tick отлетает, ты кстати 2 дня назад задавал вопрос на стеке, мог бы и переписать всю карту уже раз 10 и понять где ты ошибался)

[Ислом Жуманиёзов]

szQocks, в компоненте карты нет ререндоров и ваш коментарий ты мог бы сделать что то не помогает с решением задачи и не несет какую то полезную информацию.

Answer 1

[Ислом Жуманиёзов]

Оказывается карта зависает когда передаются объекты с пустыми значениями для lat и long то есть пустые координаты или не правильные значения
https://yandex.ru/blog/mapsapi/45397