Как визуализировать график d3 в реагирующем редуксе

Question

Я пытаюсь сделать базовый график d3, используя React redux. Я получаю значение от редуктора, но когда я перебираю данные, я получаю сообщение об ошибке:

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

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

Answer 2

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

Похоже, здесь ваш chartData на самом деле props следовательно if утверждение всегда будет правдой.