Question

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

如果我从NavBar导航到另一个Link（使用react-router），然后导航回到该页面，则组件会从mapStateToProps接收更新的道具，并且先前单击的Google Maps指针具有{{1 }}打开。

过去1周，我一直在尝试对此进行调试，尝试将<InfoWindow>转换为类组件，但是没有用。

components / ClassSchedule / Map / index.js

components/ClassSchedule/Map/Pure.jsx

components / ClassSchedule / Map / Pure.jsx

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 / MapContent.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;

reducers / index.js

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 / classMapTable.js

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

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

store / index.js

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

export default classMapTable;

actions / 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;
}

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",

故事的寓意：保留您的最新消息。

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

1 个答案: