Question

我尝试使用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)

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

如何在react redux中渲染d3图表

2 个答案: