0

我在我的应用程序上通过 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）中收到了这个警告。

警告：componentWillReceiveProps 已重命名，不推荐使用。有关详细信息，请参阅“一些链接”。

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

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

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

请更新以下组件：Animate、Area、AreaChart、Text

我正在使用 react 16.9.0。

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

4

1 回答 1

3

您似乎从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

于 2019-10-19T20:04:58.483 回答