reactjs - 为什么应用程序会被 recharts 组件迷住?
问题描述
我在我的项目中使用 recharts(请参阅示例),有时在我使用 reachrts 组件的所有页面上我都遇到了错误(请参阅错误),我的应用程序迷恋然后我正在重新安装节点模块并开始工作。我正在使用 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$1 (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$1 (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
解决方案
我遇到了同样的问题,第 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 包的方法
推荐阅读
- java - 使用具有事务支持的 Spring Data JPA 删除数据并将数据插入数据库
- search - TYPO3 Indexed_search 设置起始页
- c# - 无法使用 WCF 服务在 IOS 设备上下载/流式传输视频文件
- java - 在 Java 应用程序中禁用 jaspersoft 日志记录
- c - 此 C 代码中是否存在内存泄漏?
- powershell - Google Cloud SDK Powershell - 命令在文本编辑器中打开脚本文件
- css - CSS3 形状还是 SVG?
- sql-server - 如何在文档的最深层次结构中对所有 xml 节点值求和,在 sql server 中使用 xpath 到 xml 列,而不使用节点名称?
- xamarin - 升级到 Xamarin.Android 9.0.0.18 出现错误:没有找到适合 TypefaceSpan 的构造函数
- ubuntu - 如何配置 mosquitto 的 Ubuntu snap 版本?