Question

我正在使用使用ReactSwipableView包的Material ui SwipeableViews，我在控制台上收到此错误

react-dom.development.js：12466警告：componentWillReceiveProps已重命名，不建议使用。有关详情，请参见。


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

如果在道具更改时要更新状态，请重构代码以使用备忘录技术或将其移至静态getDerivedStateFromProps。了解更多信息：

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


请更新以下组件：ReactSwipableView

有什么办法可以消除这个错误？我确实尝试了UNSAFE_componentWillReceiveProps，但没有任何改变

Answer 1

使用getDerivedStateFromProps代替componentWillReceiveProps

例如：

之前：

// Before
class ExampleComponent extends React.Component {
  state = {
    isScrollingDown: false,
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.currentRow !== nextProps.currentRow) {
      this.setState({
        isScrollingDown:
          nextProps.currentRow > this.props.currentRow,
      });
    }
  }
}

之后：

// After
class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {
    isScrollingDown: false,
    lastRow: null,
  };

  static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Answer 2

It seems this has been reported to the maintainers already.

现在，作为开源软件的使用者，您可以：

等待他们解决（或不解决）问题
保持冷静，并提交PR为他们解决：) Here are all the references to componentWillReceiveProps in the repo
找到要使用的新程序包

最终，这不是与您的软件有关的错误，而是它所依赖的依赖项。解决这些问题实际上不是您的责任。如果您的应用运行，那就没问题了。来自path.dirname(process.execPath)的警告不会出现在生产环境中。

Answer 3

我在查找组件中的哪个位置WillReceiveProps时遇到问题。我确实在警告中注意到它提到了一个特定的组件“ Drawer”，它是我们正在使用的ant-d lib的一部分。将ant-d升级到最新版本后，警告消失了。

Answer 4

这是React Native项目中发生的常见错误，因此可以通过以下步骤解决：

首先在您的react native项目目录中安装lodash，

npm i --save lodash

-之后，在您的.js文件中编写以下代码：

    import { YellowBox } from 'react-native';
    import _ from 'lodash';

    YellowBox.ignoreWarnings(['componentWillReceiveProps']);
    const _console = _.clone(console);
    console.warn = message => {
    if (message.indexOf('componentWillReceiveProps') <= -1) {
     _console.warn(message);
    } 
   };

Answer 5

您可以通过仅阻塞node_modules / react-dom / cjs / react-dom.development.js和node_modules / react-dom / umd / react-dom.development.js中的警告命令来清除警告

之前：

...

if (componentWillReceivePropsUniqueNames.size > 0) {

    var _sortedNames4 = setToSortedString(componentWillReceivePropsUniqueNames);

    warn('componentWillReceiveProps has been renamed, and is not recommended for use. + ...);
}

...

之后：

...

if (componentWillReceivePropsUniqueNames.size > 0) {

    var _sortedNames4 = setToSortedString(componentWillReceivePropsUniqueNames);

    //warn('componentWillReceiveProps has been renamed, and is not recommended for use. + ...);
}

...

componentWillReceiveProps已重命名

5 个答案: