React-redux - 使用 npm d3 和 PieChart 时出现控制台错误答案

【问题标题】：React-redux - Console Error on using npm d3 and the PieChartReact-redux - 使用 npm d3 和 PieChart 时出现控制台错误
【发布时间】：2018-02-19 10:55:56
【问题描述】：

以下是我在 react-redux 应用程序中遇到的错误。

AppPieChart.tsx:26 Uncaught TypeError: Cannot read property 'map' of undefined

data.map 在控制台中突出显示为错误

 <div className="legend">
   <svg width="230" height="230">
          {
            data.map(
              (value,i)=>{
                  return(
                      <g key={i} className="legend" transform={translate(50, 49-i*5)} >
                        <rect width="15" height="15" y={i*30} fill={value.stroke} rx="15"/>
                        <text x={19} y={11+i*30}>{value.label}</text>
                      </g>
                    )
              })
          }      
        </svg>
     </div>

在上面的组件中，我正在导出饼图并将其导入另一个组件，但目前我收到控制台错误。

我猜这个错误很常见，每个人都可能知道，因此如果需要更多详细信息，请告诉我。

【问题讨论】：

您正在向未定义的映射函数输入数据。请发布导致问题的特定行
当然@G_S 我已经包含了导致错误的语句
你确定你在这里得到一个有效的“数据”对象吗？
是的@G_S - 我将它作为道具数据获取，而且最初我将其初始化为 -' let data = this.props.data'
初始化后能否在渲染方法中做一个数据控制台？

标签： reactjs npm react-redux pie-chart

【解决方案1】：

请注意，使用空检查来抑制错误是不好的，将来可能会不好。检查您是否有有效数据（无论是否已定义），然后调用 data.map

<div className="legend">
   <svg width="230" height="230">
          {
           data && data.map(
              (value,i)=>{
                  return(
                      <g key={i} className="legend" transform={translate(50, 49-i*5)} >
                        <rect width="15" height="15" y={i*30} fill={value.stroke} rx="15"/>
                        <text x={19} y={11+i*30}>{value.label}</text>
                      </g>
                    )
              })
          }      
        </svg>
     </div>

【讨论】：

是的，你是对的@G_S，我正在获取未定义的数据。