为什么app crush with recharts components？

Question

我在我的项目中使用 recharts（参见示例），有时在我使用 recahrts 组件的所有页面上出现错误（参见错误），我的应用程序崩溃，然后我重新安装节点模块并开始工作.我使用的是 recharts@1.7.1 版本。我不明白为什么会出现此错误以及如何解决它。将不胜感激。

  {dataWithoutNullValue.length > 0 && windowWidth &&
                        <PieChart width={windowWidth < 500 ? 300 : 500} height={windowWidth < 400 ? 350 : 400} >
                            <Pie
                                data={dataWithoutNullValue}
                                innerRadius={90}
                                outerRadius={125}
                                paddingAngle={5}
                                dataKey="value"
                                isAnimationActive={false}
                                label={windowWidth > 500 && renderCustomizedLabel}
                            >
                                {
                                    dataWithoutNullValue.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)
                                }
                            </Pie>
                            {windowWidth < 500 && <Legend dataKey="value" />}
                        </PieChart>}


Error

     ChartUtils.js:133 Uncaught TypeError: validateData.map is not a function
        at getDomainOfDataByKey (ChartUtils.js:133)
        at generateCategoricalChart.js:1019
        at Array.reduce (<anonymous>)
        at CategoricalChartWrapper.getAxisMapByAxes (generateCategoricalChart.js:995)
        at CategoricalChartWrapper.getAxisMapByAxes (react-hot-loader.development.js:724)
        at CategoricalChartWrapper.getAxisMap (generateCategoricalChart.js:942)
        at CategoricalChartWrapper.getAxisMap (react-hot-loader.development.js:724)
        at generateCategoricalChart.js:1598
        at Array.reduce (<anonymous>)
        at CategoricalChartWrapper.updateStateOfAxisMapsOffsetAndStackGroups (generateCategoricalChart.js:1596)
        at CategoricalChartWrapper.updateStateOfAxisMapsOffsetAndStackGroups (react-hot-loader.development.js:724)
        at new BarChart (generateCategoricalChart.js:830)
        at new BarChart (eval at ES6ProxyComponentFactory (react-hot-loader.development.js:337), <anonymous>:14:7)
        at constructClassInstance (react-dom.development.js:12923)
        at updateClassComponent (react-dom.development.js:17060)
        at beginWork (react-dom.development.js:18538)
        at HTMLUnknownElement.callCallback (react-dom.development.js:189)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
        at invokeGuardedCallback (react-dom.development.js:291)
        at beginWork (react-dom.development.js:23078)
        at performUnitOfWork (react-dom.development.js:22042)
        at workLoopSync (react-dom.development.js:22018)
        at performSyncWorkOnRoot (react-dom.development.js:21636)
        at react-dom.development.js:11148
        at unstable_runWithPriority (scheduler.development.js:659)
        at runWithPriority (react-dom.development.js:11094)
        at flushSyncCallbackQueueImpl (react-dom.development.js:11143)
        at flushSyncCallbackQueue (react-dom.development.js:11131)
        at scheduleUpdateOnFiber (react-dom.development.js:21079)
        at Object.enqueueSetState (react-dom.development.js:12693)
        at Connect.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:464)
        at Connect.onStateChange (connectAdvanced.js:205)
        at Connect.onStateChange (react-hot-loader.development.js:724)
        at Object.notify (Subscription.js:23)
        at Subscription.notifyNestedSubs (Subscription.js:60)
        at Connect.onStateChange (connectAdvanced.js:202)
        at Connect.onStateChange (react-hot-loader.development.js:724)
        at Object.notify (Subscription.js:23)
        at Subscription.notifyNestedSubs (Subscription.js:60)
        at Connect.onStateChange (connectAdvanced.js:202)
        at Connect.onStateChange (react-hot-loader.development.js:724)
        at Object.dispatch (redux.js:222)
        at e (<anonymous>:1:40553)
        at index.js:11
        at middleware.js:13
        at middleware.js:72
        at dispatch (redux.js:640)
        at index.js:196

Answer 1

我遇到了同样的问题，第 65 行的 ChartUtils.js 总是以字符串形式返回数据数组的头部

_flatMap(data, function (entry) {
return getValueByDataKey(entry, key);
});

在我的例子中，我使用的是 lodash-webpack-plugin，它混合了不同包的 lodash 版本。如果你单步执行 lodash，你会看到：

function flatMap(collection, iteratee) {
return baseFlatten(map(collection, iteratee), 1);
}

会进入head，它总是获取数组的第一个属性。

我停止使用 lodash-webpack-plugin 和 LodashModuleReplacementPlugin，不幸的是我还没有找到从集合中排除一个 npm 包的方法

Answer 2

我也有同样的问题，我使用了 lodash-webpack-plugin 并且它导致了错误。在 lodash-wepback-plugin 文档中，扁平化功能会自动删除，这会导致错误。在 webpack 配置文件中，您可以启用展平功能：

new LodashModuleReplacementPlugin({
   'flattening': true,
});

对我有用

为什么app crush with recharts components？

Why does app crush with recharts components?

reactjs

recharts