使用重图反应钩子区域图控制台警告

Question

我在我的应用程序上从重图实现了面积图，如下所示：

import React from 'react';
import {
AreaChart,
Area,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
} from 'recharts';
import PropTypes from 'prop-types';
const CustomAreaChart = (props) => {
const {
data,
xDataKey,
yDataKey,
areaDataKey,
options,
} = props;
return (
<ResponsiveContainer>
<AreaChart
data={data}
width={options.width}
height={options.height}
margin={options.margin}
>
<XAxis dataKey={xDataKey} />
<YAxis dataKey={yDataKey} />
<Tooltip content={options.renderTooltipContent} />
<Area
type={options.areaType}
dataKey={areaDataKey}
stroke={options.areaStrokeColor}
fill={options.areaFillColor}
/>
</AreaChart>
</ResponsiveContainer>
);
};
CustomAreaChart.propTypes = {
data: PropTypes.array.isRequired,
areaDataKey: PropTypes.string.isRequired,
xDataKey: PropTypes.string,
yDataKey: PropTypes.string,
options: PropTypes.object,
};
CustomAreaChart.defaultProps = {
xDataKey: null,
yDataKey: null,
options: {
width: 500,
height: 400,
margin: {
top: 0,
right: 0,
left: 0,
bottom: 0,
},
renderTooltipContent: null,
areaType: 'monotone',
areaStrokeColor: null,
areaFillColor: null,
},
};
export default CustomAreaChart;

它现在工作正常，但我在控制台(铬(中收到此警告。

警告：componentWillReceiveProps 已被重命名，并且不是 建议使用。看 "一些链接"了解详情。

• 将数据获取代码或副作用移动到组件DidUpdate。

• 如果您在 props 更改时更新状态，请重构代码以使用记忆技术或将其移动到静态 getDerivedStateFromProps.了解更多信息："一些链接">

• 将 componentWillReceiveProps 重命名为 UNSAFE_componentWillReceiveProps 以在非严格模式下禁止显示此警告。在 React 17.x 中，只有 UNSAFE_名称将起作用。将所有已弃用的生命周期重命名为其 新名称，您可以在npx react-codemod rename-unsafe-lifecycles中运行 您的项目源文件夹。

请更新以下组件：动画、面积、面积图、文本

我正在使用反应16.9.0.

您有什么建议可以删除此警告吗？

Answer 1

您似乎从recharts软件包中收到了这些警告。

因此，如果您真的想减少那些烦人的警告，则需要将软件包替换为那些永远不会产生警告的软件包。

让我在下面列出一些替代方案。

http://reactcommunity.org/react-chartjs/index.html

https://react-charts.js.org/examples/area

https://react-google-charts.com/area-chart

https://www.npmjs.com/package/react-simple-charts