React 16.9使用Recharts AreaChart遇componentWillReceiveProps警告求解决

这个警告不是你的代码导致的，问题出在你当前使用的Recharts版本内部——它还在使用React 16.9.0开始标记为过时的componentWillReceiveProps生命周期方法，React会对这类旧API抛出警告提示。

下面是几种可行的解决办法，按推荐优先级排序：

1. 升级Recharts到最新稳定版本 #

Recharts后续的版本已经修复了这个问题，把旧的生命周期方法替换成了React推荐的新API（比如getDerivedStateFromProps或者componentDidUpdate）。执行以下命令升级即可：

# npm 用户
npm update recharts

# yarn 用户
yarn upgrade recharts

升级完成后，重新启动项目，警告应该就会消失了。这是最彻底的解决方式，也能同步获得Recharts的其他功能更新和bug修复。

2. 临时兼容方案（不推荐长期使用） #

如果因为项目依赖限制暂时无法升级Recharts，可以用以下临时方法压制警告：

• 重命名过时生命周期方法：按照警告提示，运行React官方提供的codemod工具，自动把Recharts内部的componentWillReceiveProps重命名为UNSAFE_componentWillReceiveProps。执行命令：

  npx react-codemod rename-unsafe-lifecycles
  

  注意：这只是让警告暂时消失，UNSAFE_前缀的API在React未来版本中会被彻底移除，所以这只是权宜之计。
• 开发环境忽略特定警告：如果你只是不想在开发控制台看到这个警告，可以在项目的React配置中添加忽略规则。比如在src/index.js开头添加：

  const originalConsoleWarn = console.warn;
  console.warn = (...args) => {
    if (typeof args[0] === 'string' && args[0].includes('componentWillReceiveProps has been renamed')) {
      return;
    }
    originalConsoleWarn(...args);
  };
  

  这种方式只是隐藏警告，并没有解决本质问题，不建议在生产环境使用。

总结一下：优先选择升级Recharts版本，这是最规范且可持续的解决方案。

内容的提问来源于stack exchange，提问作者Amir Christian