使用redux工具提示时的"this.props.dispatch is not a function"

Question

下面的 this.props.dispatch 问题已修复，但现在我收到一条错误消息，指出：

Could not find "store" in either the context or props of "Connect(Tooltip)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Tooltip)".
▶ 25 stack frames were collapsed.
./src/index.js
C:/Users/rksny/Desktop/travelPlanner/src/index.js:11
8 | import registerServiceWorker from './registerServiceWorker';
9 | 
10 | 
> 11 | ReactDOM.render(<App />, document.getElementById('root'));
12 | registerServiceWorker();
13 | 
14 |

我一直收到"this.props.dispatch"在使用redux-tooltip时不是一个函数。这是我第一次尝试使用 redux，所以也许我错过了一些明显的东西。我本质上是在尝试复制此处找到的反应简单地图示例：https://www.react-simple-maps.io/with-redux-tooltip。

错误消息是：

TypeError: this.props.dispatch is not a function
20 | handleMove(geography, evt) {
21 |   const x = evt.clientX
22 |   const y = evt.clientY + window.pageYOffset
> 23 |   this.props.dispatch(
24 |     show({
25 |       origin: { x, y },
26 |       content: geography.properties.name,

代码片段：

import React, { Component } from 'react';
import withRedux from "next-redux-wrapper"
import { ComposableMap, ZoomableGroup, Geographies, Geography } from "react-simple-maps";
import { WorldMapData } from '../Utils/Data';
import { connect } from 'react-redux';
import {
Tooltip,
actions,
} from "redux-tooltip"
import { initStore } from './stores';
const { show, hide } = actions
class WorldMap extends Component {
constructor() {
super()
this.handleMove = this.handleMove.bind(this)
this.handleLeave = this.handleLeave.bind(this)
}
handleMove(geography, evt) {
const x = evt.clientX
const y = evt.clientY + window.pageYOffset
this.props.dispatch(
show({
origin: { x, y },
content: geography.properties.name,
})
)
}
handleLeave() {
this.props.dispatch(hide())
}	
	render() {
		return (
			<div >
				<div className='' style={{height: '18vh'}}>
					<p className="black b f1 f-headline-ns tc db mb3 mb4-ns" title="Home">Travel Planner</p>
					<p className='black f2'>select dream destination below</p>
				</div>
			<div>
				<ComposableMap className='ba' style={{width: '90%', height: 'auto', maxHeight: '70vh'}}>
				  <ZoomableGroup>
				    <Geographies  geography={ WorldMapData }>
				      {(geographies, projection) => geographies.map(geography => (
				        <Geography 
				        	key={ geography.id } 
				        	geography={ geography } 
				        	projection={ projection } 
		                    onMouseMove={this.handleMove}
		                    onMouseLeave={this.handleLeave}
				        	style={{
			                    default: {			   
			                      fill: "#ECEFF1",
			                      stroke: "#607D8B",
			                      strokeWidth: 0.75,
			                      outline: "none",
			                    },
			                    hover: {
			                      fill: "#607D8B",
			                      stroke: "#607D8B",
			                      strokeWidth: 0.75,
			                      outline: "none",
			                    },
			                    pressed: {
			                      fill: "#FF5722",
			                      stroke: "#607D8B",
			                      strokeWidth: 0.75,
			                      outline: "none",
			                    },
			                }}
				        	onClick = {this.props.onRouteChange}
				        />
				      ))}
				    </Geographies>
				  </ZoomableGroup>
				</ComposableMap>
				<Tooltip />
				</div>
			</div>
		)
	}
}
export default withRedux(initStore)(WorldMap);

如果有帮助，这里是发布应用程序的 gh 页面的链接： https://rksnyder7.github.io/travelPlanner/

Answer 1

使用 props 初始化组件和基类。最初，您应该绑定它并在构造函数中进行调用。

constructor(props) {
super(props)
this.handleMove = this.handleMove.bind(this)
this.handleLeave = this.handleLeave.bind(this)
}

Answer 2

如果我理解正确，那么您似乎正在尝试直接访问dispatch()，而不是通过存储(withRedux注入到您的组件中(。请考虑对代码进行以下更新：

handleMove(geography, evt) {
const x = evt.clientX
const y = evt.clientY + window.pageYOffset
this.props.store.dispatch( // [UPDATE] Add store
show({
origin: { x, y },
content: geography.properties.name,
})
)
}
handleLeave() {
this.props.store.dispatch(hide()) // [UPDATE] Add store
}