Redux状态更新后React地图组件未实时更新问题求助

Hey there, let's work through why your map markers aren't updating in real-time when your Redux state changes! Here are the most likely fixes to try:

1. Ensure the GPS Array Has a New Reference #

Your reducer uses ...state to return a new state object, which is great—but if action.locations is a mutated version of the original array (like pushing items to an existing array instead of creating a new one), React's shallow comparison will think the gps prop hasn't changed. This happens because the array reference stays the same even if its contents update.

Fix:
In your action creator where you fetch location data, create a new array instead of reusing the existing one:

// Example action creator
export const fetchLocations = () => async (dispatch) => {
  const response = await api.get('/locations');
  dispatch({
    type: FETCH_LOCATIONS,
    locations: [...response.data] // Create a fresh array reference
  });
};

2. Convert MapResults to a PureComponent #

Regular class components don't automatically compare props for changes. Since your component only relies on Redux props, switching to PureComponent will trigger a re-render whenever props (like your GPS data) change (as long as references are new).

Update your MapResults component:

import React, { PureComponent } from 'react';

class MapResults extends PureComponent {
  // Your existing code stays the same here
}

3. Add a Dynamic Key to GoogleMapReact #

Third-party map libraries like GoogleMapReact sometimes don't detect changes in child components automatically. Adding a key prop tied to your GPS data will force the map to re-mount when the data updates, ensuring markers refresh.

Modify the GoogleMapReact JSX:

<GoogleMapReact
  bootstrapURLKeys={{ key: process.env.GOOGLE_MAPS_KEY }}
  defaultCenter={this.props.center}
  defaultZoom={this.props.zoom}
  key={this.props.coordinates.gps.length} // Key changes when array size updates
>
  {/* Your marker code */}
</GoogleMapReact>

4. Double-Check Action Type & State Path #

Quick sanity checks:

• Make sure your FETCH_LOCATIONS action type is spelled identically in both the reducer and action creator (typos are a sneaky culprit!).
• Your mapStateToProps is correctly accessing state.locations (matches your root reducer's structure), so that part looks solid.

Extra Check: Verify the Tooltip Component #

If your custom Tooltip component isn't a pure component, it might not update even when its props change. If it's a function component, wrap it in React.memo; if it's a class component, convert it to PureComponent.

After implementing these changes, your map should update markers immediately whenever the Redux state changes!

内容的提问来源于stack exchange，提问作者Kimkykie