Redux React Highcharts（Highmaps）问题从应用程序状态传递地图配置

Question

使用的技术： 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

Github Repo

Answer 1

除了@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。要访问状态属性，您必须使用安装 reducer 的键的名称，因此请使用：

function mapStateToProps(state){
  return {
    mapConfig: state.mapConfig.mapConfig 
  };
};

Redux React Highcharts（Highmaps）问题从应用程序状态传递地图配置

Redux React Highcharts (Highmaps) issue passing map config from app state

highcharts

highmaps

redux

react-redux