React hooks 使用 recharts AreaChart 控制台警告答案

【问题标题】：React hooks using recharts AreaChart Console WarningReact hooks 使用 recharts AreaChart 控制台警告
【发布时间】：2020-02-16 07:23:45
【问题描述】：

我在我的应用上通过 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 in 您的项目源文件夹。

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

我正在使用反应 16.9.0。

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

【问题讨论】：

recharts 是否使用已弃用的生命周期？
我不能确定。

标签： javascript reactjs react-hooks recharts area-chart

【解决方案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

【讨论】：