componentWillReceiveProps è stato rinominato

Sto usando Material ui SwipeableViews che utilizzano il pacchetto ReactSwipableView, visualizzo questo errore sulla console

reazioni-dom.development.js: 12466 Avvertenza: componentWillReceiveProps è stato rinominato e non è raccomandato per l'uso. Vedi per i dettagli.

• Sposta il codice di recupero dati o gli effetti collaterali in componentDidUpdate.
• Se stai aggiornando lo stato ogni volta che i puntelli cambiano, rifatti il ​​tuo codice per utilizzare le tecniche di memoization o spostalo su getDerivedStateFromProps statico. Ulteriori informazioni su:
• Rinominare componentWillReceiveProps in UNSAFE_componentWillReceiveProps per eliminare questo avviso in modalità non rigorosa. In React 17.x, funzionerà solo il nome UNSAFE_. Per rinominare tutti i cicli di vita obsoleti con i loro nuovi nomi, è possibile eseguire npx react-codemod rename-unsafe-lifecyclesnella cartella di origine del progetto.

Aggiorna i seguenti componenti: ReactSwipableView

c'è un modo per sbarazzarsi di questo errore ho provato UNSAFE_componentWillReceiveProps ma nulla cambia

Sembra che questo sia già stato segnalato ai manutentori.

Ora, come consumatore di un software open source, puoi:

• attendere che risolvano (o non risolvano) il problema
• essere cool e inviare un PR per risolverlo :) Ecco tutti i riferimenti a componentWillReceivePropsnel repository
• trova un nuovo pacchetto da usare

In definitiva, questo non è un errore relativo al tuo software, ma alle dipendenze su cui si basa. Non è davvero tua responsabilità ripararli. Se la tua app viene eseguita, andrà bene. Gli avvisi da react-dom.development.jsnon verranno visualizzati in produzione.

Usa getDerivedStateFromPropsinvece dicomponentWillReceiveProps

Per esempio:

Prima:

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

Dopo:

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

Ho avuto dei problemi nel trovare dove nel mio codice veniva chiamato il componente WillReceiveProps. Ho notato nell'avvertimento che menzionava un particolare componente, "Drawer" che faceva parte della libreria ant-d che stiamo usando. Dopo aver aggiornato ant-d all'ultima versione, l'avviso è scomparso.

Si è verificato un errore comune nel progetto nativo di reazione, quindi può essere risolto procedendo come segue:

• Prima installa lodash nella directory del tuo progetto nativo di reazione, ad es.

npm i --save lodash

-dopodiché scrivi il seguente codice nel tuo file .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);
    } 
   };