componentWillReceiveProps a été renommé

J'utilise Material ui SwipeableViews qui utilise le package ReactSwipableView, je reçois cette erreur sur la console

react-dom.development.js: 12466 Avertissement: componentWillReceiveProps a été renommé et son utilisation n'est pas recommandée. Voir pour plus de détails.

• Déplacez le code d'extraction de données ou les effets secondaires vers componentDidUpdate.
• Si vous mettez à jour l'état chaque fois que les accessoires changent, refactorisez votre code pour utiliser des techniques de mémorisation ou déplacez-le vers getDerivedStateFromProps statique. En savoir plus sur:
• Renommez componentWillReceiveProps en UNSAFE_componentWillReceiveProps pour supprimer cet avertissement en mode non strict. Dans React 17.x, seul le nom UNSAFE_ fonctionnera. Pour renommer tous les cycles de vie déconseillés en leurs nouveaux noms, vous pouvez exécuter npx react-codemod rename-unsafe-lifecyclesdans votre dossier source de projet.

Veuillez mettre à jour les composants suivants: ReactSwipableView

est-il possible de se débarrasser de cette erreur, j'ai essayé UNSAFE_componentWillReceiveProps mais rien ne change

Il semble que cela ait déjà été signalé aux responsables.

Maintenant, en tant que consommateur d'un logiciel open source, vous pouvez:

• attendez qu'ils résolvent (ou ne résolvent pas) le problème
• soyez cool et soumettez un PR pour le réparer :) Voici toutes les références au componentWillReceivePropsrepo
• trouver un nouveau package à utiliser

En fin de compte, il ne s'agit pas d'une erreur liée à votre logiciel, mais des dépendances sur lesquelles il repose. Ce n'est pas vraiment votre responsabilité de les réparer. Si votre application fonctionne, tout ira bien. Les avertissements de react-dom.development.jsn'apparaîtront pas en production.

Utiliser getDerivedStateFromPropsau lieu decomponentWillReceiveProps

Par exemple:

Avant:

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

Aprè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

J'ai eu des problèmes pour trouver où dans mon composant de codeWillReceiveProps était appelé. J'ai remarqué dans l'avertissement qu'il mentionnait un composant particulier, "Drawer" qui faisait partie de la bibliothèque ant-d que nous utilisons. Après la mise à niveau de ant-d vers la dernière version, l'avertissement a disparu.

Il s'agit d'une erreur courante survenue dans le projet natif React. Elle peut donc être résolue en procédant comme suit:

• Installez d'abord lodash dans votre répertoire de projet natif réactif, c.-à-d.

npm i --save lodash

-Après écrivez ensuite le code suivant dans votre fichier .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);
    } 
   };