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

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

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