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ó

Buk Lau
fuente
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.

Martín
fuente
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

Bashirpour
fuente
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ó.

Chris Adams
fuente
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);
    } 
   };
Suraj Shrestha
fuente