Se ha cambiado el nombre de componentWillReceiveProps


10

Estoy usando material ui SwipeableViews que usan el paquete ReactSwipableView, obtengo este error en la consola

react-dom.development.js: 12466 Advertencia: componentWillReceiveProps ha cambiado de nombre y no se recomienda su uso. Ver para más detalles.

  • Mueva el código de obtención de datos o los efectos secundarios a componentDidUpdate.
  • Si está actualizando el estado cada vez que cambian los accesorios, refactorice su código para usar técnicas de memorización o muévalo a getDerivedStateFromProps estático. Obtenga más información en:
  • Cambie el nombre de componentWillReceiveProps a UNSAFE_componentWillReceiveProps para suprimir esta advertencia en modo no estricto. En React 17.x, solo funcionará el nombre UNSAFE_. Para cambiar el nombre de todos los ciclos de vida obsoletos a sus nuevos nombres, puede ejecutarlos npx react-codemod rename-unsafe-lifecyclesen la carpeta de origen del proyecto.

Actualice los siguientes componentes: ReactSwipableView

¿Hay alguna manera de deshacerse de este error? Intenté UNSAFE_componentWillReceiveProps pero nada cambió


1
¿Está utilizando componentWillReceivePropsen su componente o proviene de su paquete?
Martin

1
viene del paquete react-swipeable-views
Buk Lau

Respuestas:


9

Parece que esto ya se ha informado a los mantenedores.

Ahora, como consumidor de un software de código abierto, puede:

En última instancia, este no es un error relacionado con su software, sino las dependencias en las que se basa. No es realmente tu responsabilidad arreglar eso. Si su aplicación se ejecuta, estará bien. Las advertencias de react-dom.development.jsno aparecerán en producción.


2

Usar en getDerivedStateFromPropslugar decomponentWillReceiveProps

Por ejemplo:

Antes de:

// 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,
      });
    }
  }
}

Después:

// 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


1

Tuve problemas para encontrar dónde se llamaba a mi componente de código WillReceiveProps. Noté en la advertencia que mencionaba un componente particular, "Drawer", que era parte de la biblioteca ant-d que estamos usando. Después de actualizar ant-d a la última versión, la advertencia desapareció.


1

Es un error común ocurrido en el proyecto nativo de reacción, por lo que puede resolverse siguiendo estos pasos:

  • Primero instale lodash en su directorio de proyecto nativo react, es decir,
npm i --save lodash

-Después, escriba el siguiente código en su archivo .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);
    } 
   };
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.