Redux 存储更新但 mapStateToProps 不更新组件道具

Question

当我单击我的 Google 地图组件上的指针时，我可以看到我的商店在 Redux Devtools 中更新，但 mapStateToProps 似乎没有更新我的组件道具。因此，我的 Google 地图指针 <InfoWindow> 无法打开。

如果我从 NavBar 导航到另一个链接（使用 react-router），然后导航回此页面，组件会从 mapStateToProps 接收更新的道具，并且之前单击的 Google 地图指针会打开 <InfoWindow>。

过去 1 周我一直在尝试调试此问题，尝试将 components/ClassSchedule/Map/Pure.jsx 转换为类组件，但没有成功。

components/ClassSchedule/Map/index.js

import { connect } from 'react-redux';
import { selectClass } from '../../../actions/index';
import Pure from './Pure';

const mapStateToProps = state => ({
  selectedClass: state.classMapTable.selectedClass,
});

const mapDispatchToProps = dispatch => ({
  selectClass: id => dispatch(selectClass(id)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Pure);

components/ClassSchedule/Map/Pure.jsx

import React from 'react';
import MapContent from './MapContent';

const Map = props => {
  return (
    <MapContent
      googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=googleMapsKeyHere`}
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: `550px` }} />}
      mapElement={<div style={{ height: `100%` }} />}
      {...props}
    />
  );
};

export default Map;

components/ClassSchedule/Map/MapContent.jsx

import React from 'react';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow,
} from 'react-google-maps';

import { defaultPosition } from '../../../data/mapData';
import { classes } from '../../../data/classData';
const { zoom, centre } = defaultPosition;

const MapContent = withScriptjs(
  withGoogleMap(({ selectedClass, selectClass }) => (
    <GoogleMap defaultZoom={zoom} defaultCenter={centre}>
      {classes.map(c => (
        <Marker
          key={`map${c.id}`}
          icon={
            'https://mt.google.com/vt/icon?psize=30&font=fonts/arialuni_t.ttf&color=ff304C13&name=icons/spotlight/spotlight-waypoint-a.png&ax=43&ay=48&text=%E2%80%A2'
          }
          position={c.coordinates}
          onClick={() => selectClass(c.id)}
        >
          {selectedClass === c.id && (
            <InfoWindow>
              <React.Fragment>
                <div>{c.area}</div>
                <div>{`${c.level} ${c.subject}`}</div>
                <div>{`${c.day}, ${c.time}`}</div>
              </React.Fragment>
            </InfoWindow>
          )}
        </Marker>
      ))}
    </GoogleMap>
  ))
);

export default MapContent;

reducers/index.js

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import classMapTable from './classMapTable';

export default history =>
  combineReducers({
    router: connectRouter(history),
    classMapTable,
  });

reducers/classMapTable.js

const classMapTable = (state = {}, action) => {
  switch (action.type) {
    case 'SELECT_CLASS':
      return { ...state, selectedClass: action.classId };
    default:
      return state;
  }
};

export default classMapTable;

存储/index.js

import { createBrowserHistory } from 'history';
import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import { composeWithDevTools } from 'redux-devtools-extension';
import createRootReducer from '../reducers';

export const history = createBrowserHistory();

export default function configureStore(preloadedState) {
  const store = createStore(
    createRootReducer(history),
    preloadedState,
    composeWithDevTools(applyMiddleware(routerMiddleware(history)))
  );
  return store;
}

actions/index.js

export const selectClass = classId => ({
  type: 'SELECT_CLASS',
  classId,
});

Answer 1

调试了大约2周后，我随机决定运行npm update。事实证明我的代码没有任何问题，我的 npm 包只是过时/不兼容。我不知道我是如何拥有不同版本的 react 和 react-dom 的。现在一切正常。

这是在我的 package.json 中：

"react": "^16.7.0",
"react-dev-utils": "^7.0.0",
"react-dom": "^16.4.2",

更新我的 package.json 后：

"react": "^16.8.1",
"react-dev-utils": "^7.0.1",
"react-dom": "^16.8.1",

故事的寓意：让您的包裹保持最新状态。