Redux-子组件不会在状态更改时重新呈现。

Question

这个体系结构是这样的:我有一个plotMap组件，它从状态获取一个图的列表，并将它们映射到一组plotMarker组件，这些组件基于地图缩放(也从状态读取)返回多边形/标记。如果选择了要编辑的给定绘图，则plotMarker组件将返回可编辑的plotPolygon组件。当用户保存已编辑的plotPolygon组件时，这将更新状态绘图列表中相应的绘图。

问题：plotMarker的多边形在编辑后的plotPolygon组件成功保存后立即显示，它不会被更新为新的形状，而是会保持旧的形状。只有当一个多边形缩小，plotMarker呈现其标记组件，然后缩放，并且plotMarker重新呈现其多边形组件时，才会显示新的形状。

这可能是由于应用程序内部的延迟吗？如何使plotMarker在成功保存后立即显示新的多边形？

plotMap组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Map, TileLayer, LayersControl, MapControl } from 'react-leaflet';
import { GoogleLayer } from './GoogleLayer';
import { geolocated } from 'react-geolocated';
import 'leaflet-geocoder-mapzen';
import SearchBox from './searchBox';
import Control from 'react-leaflet-control';
import { centroid } from '@turf/turf';
import PlotMarker from './plotMarker';

const { BaseLayer } = LayersControl;
const key = 'key';
const hybrid = 'HYBRID';
const terrain = 'TERRAIN';
const road = 'ROADMAP';
const satellite = 'SATELLITE';

const centerLat = props => {
    if (
        props.isGeolocationAvailable &&
        props.isGeolocationEnabled &&
        props.coords
    ) {
        return props.coords.latitude;
    }
    return 32.11;
};

const centerLong = props => {
    if (
        props.isGeolocationAvailable &&
        props.isGeolocationEnabled &&
        props.coords
    ) {
        return props.coords.longitude;
    }
    return 34.963;
};

const mapCenterPoint = props => {
    if (props.plots && (props.selectedPlot || props.plotBeingEdited)) {
        let ourPlot = props.plots.filter(
            plot => plot._id === (props.selectedPlot || props.plotBeingEdited)
        )[0];
        try {
            let center = centroid(ourPlot.feature).geometry.coordinates.reverse();
            return { center: center, zoom: 16 };
        } catch (e) {
            console.log(e);
        }
    }
    return { center: [centerLat(props), centerLong(props)], zoom: 8 };
};

export class PlotMap extends Component {
    markers = props => {
        if (props.plots) {
            return (
                <div>
                    {(props.filteredPlots || props.plots).map(
                        plot =>
                            plot &&
                            plot.feature &&
                            plot._id && (
                                <PlotMarker
                                    key={plot._id}
                                    id={plot._id}
                                    name={plot.name}
                                    geoJSON={plot.feature}
                                />
                            )
                    )}
                </div>
            );
        }
    };

    render() {
        return (
            <div
                className="col-sm-8 m-auto p-0 flex-column float-right"
                style={{ height: `85vh` }}>
                <Map
                    center={mapCenterPoint(this.props).center}
                    zoom={mapCenterPoint(this.props).zoom}
                    zoomControl={true}
                    onZoomend={e => {
                        this.props.setZoomLevel(e.target.getZoom());
                    }}
                    onMoveEnd={e => {
                        this.props.setMapCenter(e.target.getCenter());
                    }}>
                    <LayersControl position="topright">
                        <BaseLayer name="Google Maps Roads">
                            <GoogleLayer googlekey={key} maptype={road} />
                        </BaseLayer>
                        <BaseLayer name="Google Maps Terrain">
                            <GoogleLayer googlekey={key} maptype={terrain} />
                        </BaseLayer>
                        <BaseLayer checked name="Google Maps Hybrid">
                            <GoogleLayer
                                googlekey={key}
                                maptype={hybrid}
                                libraries={['geometry', 'places']}
                            />
                        </BaseLayer>
                    </LayersControl>
                    <SearchBox postion="bottomright" />
                    {this.markers(this.props)}
                </Map>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        filteredPlots: state.plots.filteredPlots,
        plots: state.plots.plots,
        selectedPlot: state.plots.selectedPlot,
        mapCenter: state.plots.mapCenter
    };
}

export default geolocated({
    positionOptions: {
        enableHighAccuracy: false
    },
    userDecisionTimeout: 5000,
    suppressLocationOnMount: false
})(connect(mapStateToProps, actions)(PlotMap));

plotMarker组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Marker, Popup, GeoJSON } from 'react-leaflet';
import { centroid } from '@turf/turf';
import PlotPolygon from './plotPolygon';

const position = geoJSON => {
    return centroid(geoJSON).geometry.coordinates.reverse();
};

export class PlotMarker extends Component {
    render() {
        const {
            id,
            name,
            geoJSON,
            zoomLevel,
            selectedPlot,
            plotBeingEdited
        } = this.props;
        const markerPosition = position(geoJSON);
        let style = () => {
            return {
                color: 'blue'
            };
        };
        if (selectedPlot === id) {
            style = () => {
                return {
                    color: 'red'
                };
            };
        }
        if (zoomLevel > 14 && plotBeingEdited === id) {
            return <PlotPolygon id={id} geoJSON={geoJSON} />;
        } else if (zoomLevel > 14) {
            return (
                <GeoJSON
                    id={id}
                    data={geoJSON}
                    style={style}
                    onClick={() => {
                        this.props.selectPlot(id);
                    }}
                />
            );
        }
        return (
            <Marker
                id={id}
                className="marker"
                position={markerPosition}
                onClick={() => {
                    this.props.selectPlot(id);
                }}>
                <Popup>
                    <span>{name}</span>
                </Popup>
            </Marker>
        );
    }
}

function mapStateToProps(state) {
    return {
        selectedPlot: state.plots.selectedPlot,
        plotBeingEdited: state.plots.plotBeingEdited,
        zoomLevel: state.plots.zoomLevel,
        plots: state.plots.plots,
        filteredPlots: state.plots.filteredPlots
    };
}

export default connect(mapStateToProps, actions)(PlotMarker);

plotPolygon组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Polygon, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

const positions = props => {
    return props.geoJSON.geometry.coordinates[0].map(a => [a[1], a[0]]);
};

export class PlotPolygon extends Component {
    render() {
        const { id, geoJSON } = this.props;
        return (
            <FeatureGroup>
                <EditControl
                    position="topright"
                    onEdited={e => {
                        e.layers.eachLayer(a => {
                            this.props.updatePlot({
                                id: id,
                                feature: a.toGeoJSON()
                            });
                        });
                    }}
                    edit={{ remove: false }}
                    draw={{
                        marker: false,
                        circle: false,
                        rectangle: false,
                        polygon: false,
                        polyline: false
                    }}
                />
                <Polygon positions={[positions(this.props)]} />;
            </FeatureGroup>
        );
    }
}

function mapStateToProps(state) {
    return { plots: state.plots.plots, filteredPlots: state.plots.filteredPlots };
}

export default connect(mapStateToProps, actions)(PlotPolygon);

Answer 1

原解决方案：

退出编辑模式后，是否需要重置缩放级别？您的逻辑在mapCenterPoint和plotMarker的if(zoomLevel...部分之间非常紧密地耦合。我在想，您是否有一种状态会导致在编辑后(直到手动缩放)，总是计算true：props.plots && (props.selectedPlot || props.plotBeingEdited)

关于重构的思考：

想出一种更优雅的方法

备选案文1: HOCs

高阶组件(或HOCs)可能是这方面的一个很好的方法。您的代码中已经有一个临时的示例：

export default connect(mapStateToProps, actions)(PlotMarker);

HOCs实际上只是在反应世界中返回对你有用的东西的函数。因此，它们是一种很好的代码重用形式。在这种情况下，connect是一个临时返回函数的函数，但是经常使用HOCs返回组件。因此，您可能有一个特殊的plotMarker(zoomLevel, beingEdited)，它执行逻辑本身来确定要呈现的标记组件的类型。

有关更多信息，请访问React的高阶组件文档。

选项2:单一返回语句

我一直很喜欢为render方法使用一个返回语句。我还没有深入了解如何处理不同的反应，但我很确定从我的经验来看，这种方式的反应更好--所以它可能消除了你调整变焦级别来重置它的需要。

我将如何在一次返回中执行PlotMarker的所有逻辑：

export class PlotMarker extends Component{
  render(){
    const {
      id,
      name,
      geoJSON,
      zoomLevel,
      selectedPlot,
      plotBeingEdited
    } = this.props;

    const markerPosition = position(geoJSON);

    let style = () =>{
      return {
        color: 'blue'
      };
    };
    if(selectedPlot === id){
      style = () =>{
        return {
          color: 'red'
        };
      };
    }

    return (
      <div>
        {
          zoomLevel > 14 && plotBeingEdited === id &&
          <PlotPolygon id={id} geoJSON={geoJSON}/> ||
          
          zoomLevel > 14 &&
          <GeoJSON
            id={id}
            data={geoJSON}
            style={style}
            onClick={() =>{
              this.props.selectPlot(id);
            }}
          /> ||
          
          <Marker
            id={id}
            className="marker"
            position={markerPosition}
            onClick={() => {
              this.props.selectPlot(id);
            }}>
            <Popup>
              <span>{name}</span>
            </Popup>
          </Marker>
        }
      </div>
    );
  }
}