使用的技术:Redux,React,React-Highcharts(Highmaps)
免责声明:第一个Redux应用程序,请好...
状态:我确信我的redux设置存在一些问题,但是通过控制台测试我可以看到我的onClick功能正确地触发了调度并更新了我的状态。 (基本上是地图点的可见性之间的切换)。
问题:我需要设置我的地图配置来自我的应用程序状态。但是当我试图将它作为道具传递时,我会收到错误。我尝试了多种方法但无济于事。
以下是我的尝试:
1
class Test extends React.Component {
render() {
console.log(this.props.mapConfig + + 'action')
return (
<div id="container">
<ReactHighmaps config={this.mapConfig} ref="chart" />
<Buttons style="success" classN="btn btn-secondary" text="test" onButtonClick={()=> this.props.showPoints( )} />
</div>
)
}
}
function mapStateToProps(state){
return {
mapConfig: state.mapConfig }
};
错误:
ReactHighmaps.src.js:1538 Uncaught Error: Config must be specified for the HighchartsMap component
at Object.renderChart (ReactHighmaps.src.js:1538)
at Object.componentDidMount (ReactHighmaps.src.js:1571)
at Object.chainedFunction [as componentDidMount] (ReactHighmaps.src.js:1181)
at commitLifeCycles (react-dom.development.js:8778)
at commitAllLifeCycles (react-dom.development.js:9938)
at HTMLUnknownElement.callCallback (react-dom.development.js:540)
at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
at invokeGuardedCallback (react-dom.development.js:436)
at commitRoot (react-dom.development.js:10042)
at performWorkOnRoot (react-dom.development.js:10966)
at performWork (react-dom.development.js:10916)
at requestWork (react-dom.development.js:10832)
at scheduleWorkImpl (react-dom.development.js:10715)
at scheduleWork (react-dom.development.js:10677)
at scheduleTopLevelUpdate (react-dom.development.js:11140)
at Object.updateContainer (react-dom.development.js:11178)
at react-dom.development.js:15190
at Object.unbatchedUpdates (react-dom.development.js:11049)
at renderSubtreeIntoContainer (react-dom.development.js:15189)
at Object.render (react-dom.development.js:15254)
at Object../src/index.js (index.js:13)
at __webpack_require__ (bootstrap 64aa9ab7ac8df7b9e8db:669)
at fn (bootstrap 64aa9ab7ac8df7b9e8db:87)
at Object.0 (index.css?ce69:26)
at __webpack_require__ (bootstrap 64aa9ab7ac8df7b9e8db:669)
at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 64aa9ab7ac8df7b9e8db:715)
at bundle.js:719
2
<ReactHighmaps config={this.props.mapConfig} ref="chart" />
错误: Highmaps框底部有标题和徽标,但没有图表显示
第3:
<ReactHighmaps config={this.props.state.mapConfig} ref="chart" />
错误:
Uncaught TypeError: Cannot read property 'mapConfig' of undefined
at Test.render (map_container.js:21)
at finishClassComponent (react-dom.development.js:7882)
at updateClassComponent (react-dom.development.js:7859)
at beginWork (react-dom.development.js:8233)
at performUnitOfWork (react-dom.development.js:10215)
at workLoop (react-dom.development.js:10279)
at HTMLUnknownElement.callCallback (react-dom.development.js:540)
at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
at invokeGuardedCallback (react-dom.development.js:436)
at renderRoot (react-dom.development.js:10357)
at performWorkOnRoot (react-dom.development.js:10963)
at performWork (react-dom.development.js:10916)
at requestWork (react-dom.development.js:10832)
at scheduleWorkImpl (react-dom.development.js:10715)
at scheduleWork (react-dom.development.js:10677)
at scheduleTopLevelUpdate (react-dom.development.js:11140)
at Object.updateContainer (react-dom.development.js:11178)
at react-dom.development.js:15190
at Object.unbatchedUpdates (react-dom.development.js:11049)
at renderSubtreeIntoContainer (react-dom.development.js:15189)
at Object.render (react-dom.development.js:15254)
at Object../src/index.js (index.js:13)
at __webpack_require__ (bootstrap 87cb00105f31648d28ed:669)
at fn (bootstrap 87cb00105f31648d28ed:87)
at Object.0 (index.css?ce69:26)
at __webpack_require__ (bootstrap 87cb00105f31648d28ed:669)
at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 87cb00105f31648d28ed:715)
at bundle.js:719
答案 0 :(得分:3)
除了@JosanIracheta在评论中注意到的内容,PointsMapConfig reducer中也存在问题。 SHOW_POINTS
操作会覆盖mapConfig
属性而不是扩展它。所以请试试这个:
const PointsMapConfig = (state = initialState, action) => {
switch (action.type){
case SHOW_POINTS:
return {
...state,
mapConfig: {
...state.mapConfig,
series: [
...state.mapConfig.series.filter((el, index) => index !== 2), {
...state.mapConfig.series[2],
visible: true
}
]
}
}
default:
return state;
}
}
下一个问题出在mapStateToProps
。要访问state属性,必须使用安装了reducer的key名称,所以请使用:
function mapStateToProps(state){
return {
mapConfig: state.mapConfig.mapConfig
};
};