React hooks 使用 recharts AreaChart 控制台警告
React hooks using recharts AreaChart Console Warning
我在我的应用程序中通过重新图表实现了 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
我在我的应用程序中通过重新图表实现了 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