Question

我有地图组件，该地图组件的中心位置已连接到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，经度：1}。
当时组件发送另一个事件以更新状态= {纬度： 2，经度：2}，因为我移动了地图。
组件以props = {纬度：1，经度：1}接收旧状态
组件将其地图位置更新为旧的{纬度：1，经度：1}并再次发送{纬度：1，经度：1}

所有这些动作变成无限...

我试图为我的redux sagas添加延迟或节流，但这没有帮助。

Answer 1

您需要将用户发起的地图移动事件与通过以编程方式移动地图所产生的事件分开。您可能只想为用户移动地图中的事件调用onMapPositionChanged。

您尚未指定要使用哪个库，但对于React Native，例如doomsower / react-native-yandexmapkit的onInteraction回调函数有一个type attribute可用于此目的。无论您使用什么库，都可能支持类似的内容。

React Redux阻止从旧状态更新组件

1 个答案: