React redux предотвращает обновление компонента из старого состояния

У меня есть компонент карты, расположение центра карты которого связано с состоянием редукции.

<YandexMapView
                ref = {this._mapRef}
                location = {this.props.location}
                onInteraction = {(event) => this.onMapPositionChanged(event)}
                geocodingEnabled = {true}
                onGeocoding = {(event) => this.onGeocoding(event)}
            />

Моя функция сохранения

onMapPositionChanged(event: OnInteractionResult) {
    const {latitude, longitude} = event;
    this.props.dispatch(updateLocation({
        latitude, longitude,
    }));
}

Когда я перемещаю карту, и после этого я перемещаю ее снова через короткое время, прежде чем мое старое состояние обновится до компонента, у меня будет бесконечный эффект дрожания.

Аномальная последовательность:

  1. Компонент отправляет событие для обновления состояния с данными {широта: 1, долгота: 1}.

  2. Состояние обновляется до {широта: 1, долгота: 1}.

  3. В это время компонент отправляет другое событие для обновления состояния = {широта: 2, долгота: 2}, потому что я переместил карту.

  4. Компонент получает старое состояние в props = {latitude: 1, longitude: 1}

  5. Компонент обновляет свое местоположение на карте до старого {широта: 1, долгота: 1} и снова отправляет {широта: 1, долгота: 1}.

и все эти действия становятся бесконечными ...

Я попытался добавить задержку или дроссель в свои саги о сокращении, но это не помогло.

Так вы говорите, что создали бесконечный цикл? Может быть, это из-за двойных событий, вы можете ограничить их стрельбой только один раз?

SoluableNonagon 08.08.2018 16:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
216
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо отделить события от движения карты, инициированного пользователем, от событий, генерируемых программным перемещением карты. Вероятно, вы захотите вызывать onMapPositionChanged только для событий из Пользователь, перемещающего карту.

Вы не указали, какую библиотеку вы используете, но для React Native, например. Обратный вызов onInteraction doomsower / react-native-yandexmapkit имеет type атрибут, который можно использовать для этой цели. Какая бы библиотека вы ни использовали, вероятно, она поддерживает нечто подобное.

Другие вопросы по теме