React redux 防止从旧状态更新组件答案

【问题标题】：React redux prevent updating component from old stateReact redux 防止从旧状态更新组件
【发布时间】：2019-01-15 19:08:30
【问题描述】：

我有地图组件，地图中心位置连接到 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,
    }));
}

当我移动地图，然后在短时间内再次移动它时，在我的旧状态更新为组件之前，我有无限抖动效果。

异常序列为：

组件发送事件以使用数据 {latitude: 1, longitude: 1} 更新状态。
状态更新为 {latitude: 1, longitude: 1}。
此时组件发送另一个事件来更新状态 = {latitude: 2、经度：2}因为我移动了地图。
组件在 props = {latitude: 1, longitude: 1}中接收旧状态
组件将其地图位置更新为旧的 {latitude: 1, longitude: 1} 并再次发送 {latitude: 1, longitude: 1}

所有这些动作都变得无限......

我尝试为我的 redux sagas 添加延迟或限制，但没有帮助。

【问题讨论】：

所以你是说你创建了一个无限循环？可能是由于双重事件，有什么方法可以限制它们只触发一次？

标签： reactjs redux state redux-saga

【解决方案1】：

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

你没有指定你正在使用哪个库，但是对于 React Native，例如doomsower/react-native-yandexmapkit 的 onInteraction 回调有一个 type attribute 可用于此目的。无论您使用什么库，都可能支持类似的东西。

【讨论】：