javascript - 使用重新图表 React hooks AreaChart 控制台警告

Question

我在我的应用程序上从 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。

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

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