我在我的应用程序上从 recharts 实现了 AreaChart,如下所示:
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;
现在工作正常,但我在控制台(chrome)中收到此警告。
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See "some link" for details.
- Move data fetching code or side effects to componentDidUpdate.
If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: "some link"
Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
npx react-codemod rename-unsafe-lifecycles
in your project source folder.Please update the following components: Animate, Area, AreaChart, Text
我正在使用react 16.9.0
。
您对删除此警告有什么建议吗?
最佳答案
您似乎收到了来自 recharts
包的警告。
因此,如果您确实想减少那些烦人的警告,则需要将这些软件包替换为那些从不产生警告的软件包。
让我在下面列出一些替代方案。
http://reactcommunity.org/react-chartjs/index.html
https://react-charts.js.org/examples/area
关于javascript - 使用重新图表 React hooks AreaChart 控制台警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58465376/