如何在 React Redux 中渲染 d3 图表答案

【问题标题】：How to render d3 chart in react redux如何在 React Redux 中渲染 d3 图表
【发布时间】：2017-07-20 12:40:55
【问题描述】：

我正在尝试使用 React redux 渲染基本的 d3 图表。我从 reducer 中获得了一个值，但是当我遍历数据时，我收到错误消息：

Uncaught TypeError: Cannot read property 'map' of undefined
    at new ChartContainer (ChartContainer.js:13)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:148)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
    at Object.mountComponent (ReactReconciler.js:37)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
    at Object.mountComponent (ReactReconciler.js:37)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:241)
    at ReactDOMComponent._createContentMarkup (ReactDOMComponent.js:591)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:479)
ChartContainer @ ChartContainer.js:13
mountComponent @ ReactCompositeComponent.js:148
ReactCompositeComponent_mountComponent @ ReactPerf.js:66
mountComponent @ ReactReconciler.js:37
mountComponent @ ReactCompositeComponent.js:225
ReactCompositeComponent_mountComponent @ ReactPerf.js:66
mountComponent @ ReactReconciler.js:37
mountChildren @ ReactMultiChild.js:241
_createContentMarkup @ ReactDOMComponent.js:591
mountComponent @ ReactDOMComponent.js:479
mountComponent @ ReactReconciler.js:37
mountComponent @ ReactCompositeComponent.js:225
ReactCompositeComponent_mountComponent @ ReactPerf.js:66
mountComponent @ ReactReconciler.js:37
mountComponent @ ReactCompositeComponent.js:225
ReactCompositeComponent_mountComponent @ ReactPerf.js:66
mountComponent @ ReactReconciler.js:37
mountComponent @ ReactCompositeComponent.js:225
ReactCompositeComponent_mountComponent @ ReactPerf.js:66
mountComponent @ ReactReconciler.js:37
mountComponentIntoNode @ ReactMount.js:266
perform @ Transaction.js:136
batchedMountComponentIntoNode @ ReactMount.js:282
perform @ Transaction.js:136
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:94
_renderNewRootComponent @ ReactMount.js:476
ReactMount__renderNewRootComponent @ ReactPerf.js:66
_renderSubtreeIntoContainer @ ReactMount.js:550
render @ ReactMount.js:570
React_render @ ReactPerf.js:66
(anonymous) @ demo.js:21
__webpack_require__ @ bootstrap 965595a…:19
(anonymous) @ bootstrap 965595a…:39
(anonymous) @ bootstrap 965595a…:39

当我在控制台中签入数据时，它是一个数组类型。请让我知道为什么我会收到该错误。以下是各个页面的代码：

行动：

import config from "../data/user.js"

export function fetchChart(){
    console.log("fetch chart")
    var arrayVal=[{
        width:700,
        height:300,
        title: 'Chart sample',
        data: config
    }]
    return {
        type:"FETCH_CHARTS",
        payload: arrayVal

    }
}

减速器

 export default function reducer(state={chart :[]},action){
       // console.log("inside reducer")
   switch(action.type){
       case "FETCH_CHARTS":{

           const newState={...state,chart:action.payload}
           console.log("newSrate",newState)
           return newState
       }
        default: {
  return {
    ...state
  }
        }
}
}

容器

import Chart from "../components/Chart"
import React from "react"
import {connect} from "react-redux"
import {fetchChart} from "../action/ChartAction"
import PropTypes from 'prop-types'

const ChartContainer =(chartData) => {
   // console.log("chatdata",chartData)
    if(chartData){
      //  console.log("length",chartData.chartData)
    return(
    <div>
            {chartData.chartData.map(chart => 
            <Chart
                data ={chart}
               width={chart.width}
                height={chart.height}
                title={chart.title}>

                <hr />
            </Chart>
            )}
            </div>  
    )    
    }         
}



ChartContainer.propTypes = {
chartData:PropTypes.arrayOf(PropTypes.shape({
    width:PropTypes.isRequired,
    height:PropTypes.isRequired,
    title:PropTypes.isRequired
})).isRequired
}

const mapStateToProps= state => {
    console.log("state",state)
    return{
    chartData:state.chart.chart
    }
}
export  default connect(
    mapStateToProps
)(ChartContainer)

【问题讨论】：

标签： reactjs d3.js react-redux react-d3

【解决方案1】：

const ChartContainer =(chartData) => {
   // console.log("chatdata",chartData)
    if(chartData){

看起来你的chartData实际上是props，因此if声明永远是正确的。

【讨论】：

【解决方案2】：

Cannot read property map of undefined

所以你的问题在于chartData.chartData.map

尝试进行以下更改：

const ChartContainer =(props) => {
   // console.log("chatdata",chartData)
    if(props.chartData){
      //  console.log("length", props.chartData)
    return(
        <div>
            {props.chartData.map(chart => 
            <Chart
                data ={chart}
               width={chart.width}
                height={chart.height}
                title={chart.title}>

                <hr />
            </Chart>
            )}
            </div>  
        )      
    }         
}

【讨论】：