reactyのd3チャートをレンダリングする方法

Question

私はReact reduxを使って基本的なd3チャートをレンダリングしようとしています。私は減速から値を取得していますが、私はデータを反復処理するとき、私はというエラーを取得しています：私はデータが来ているコンソールとその配列型をチェックインすると

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) 

Answer 1

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

ここにあなたのchartDataが実際にあるように見えますpropsしたがってifステートメントは常に真です。

Answer 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> 
     )  
    }   
}