使用redux-tooltip

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 | 

在使用redux-tooltip时，我始终收到“ this.props.dispatch”不是函数。这是我第一次尝试利用redux，所以也许我缺少明显的东西。我实质上是在尝试复制此处找到的react简单地图示例：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

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

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

Answer 2

如果我正确理解这一点，那么看来您正在尝试直接访问ConstPtr a(this)，而不是通过商店访问（Ponit::distance注入您的组件）。考虑对您的代码进行以下更新：

Point constructor
Surface constructor
Plane constructor
Distance from [100,100,1.6] to 1*x+2*y+3*z = -10 -> 84.1338
Point [100,100,1.6]; Plane 1*x+2*y+3*z = -10
1: [100,100,1.6]
2: [100,100,1.6]
3: [100,100,1.6]
Point destructor
Distance from [0,0,1.6] to 1*x+2*y+3*z = -10 -> 84.1338
Point [0,0,1.6]; Plane 1*x+2*y+3*z = -10
Plane destructor
Surface destructor
Point destructor