reactjs 组件WillReceiveProps已重命名

bttbmeg0  于 2023-01-30  发布在  React
关注(0)|答案(6)|浏览(151)

我正在使用使用ReactSwipableView包的Material ui SwipableViews,我在控制台上收到此错误
反作用域开发.js:12466警告:componentWillReceiveProps已重命名,建议不要使用。有关详细信息,请参阅。

  • 将数据提取代码或副作用移动到componentDidUpdate。
  • 如果您要在属性更改时更新状态,请重构代码以使用记忆化技术或将其移动到静态getDerivedStateFromProps。
  • 将componentWillReceiveProps重命名为UNSAFE_componentWillReceiveProps,以在非严格模式下禁止显示此警告。在React 17.x中,只有UNSAFE_ name有效。要将所有已弃用的生命周期重命名为新名称,可以在项目源文件夹中运行npx react-codemod rename-unsafe-lifecycles

请更新以下组件:React可切换视图
有什么方法可以消除这个错误吗?我确实尝试了UNSAFE_componentWillReceiveProps,但没有任何变化

bfrts1fy

bfrts1fy1#

It seems this has been reported to the maintainers already.
现在,作为开源软件的消费者,您可以:

归根结底,这不是与您的软件相关的错误,而是与软件依赖的依赖项相关的错误。修复这些错误实际上不是您的责任。如果您的应用可以运行,它将不会有问题。来自react-dom.development.js的警告不会出现在生产环境中。

***编辑:**从this commitPR)起,react-swipable-views不再使用componentWillReceiveProps。如果仍然遇到此错误,请确保使用的是v0.14.0或更高版本。

2g32fytz

2g32fytz2#

使用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

eqzww0vc

eqzww0vc3#

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

7tofc5zh

7tofc5zh4#

这是react native项目中常见的错误。因此,可以通过以下步骤解决:

  • 首先将lodash安装在react本机项目目录中,即,
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);
    } 
   };
mitkmikd

mitkmikd5#

您可以通过在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. + ...);
}

...
v9tzhpje

v9tzhpje6#

对于react原生,YellowBox已更改为LogBoX:

componentDidMount=()=>{
   LogBox.ignoreLogs(['Animated: `useNativeDriver`','componentWillReceiveProps']);    
 }

相关问题