nazwa składnika componentWillReceiveProps została zmieniona

Korzystam z interfejsu użytkownika materiału SwipeableViews korzystającego z pakietu ReactSwipableView, ten błąd pojawia się na konsoli

reag-dom.development.js: 12466 Ostrzeżenie: zmieniono nazwę componentWillReceiveProps i nie jest zalecane do użycia. Zobacz szczegóły.

• Przenieś kod pobierania danych lub efekty uboczne do componentDidUpdate.
• Jeśli aktualizujesz stan za każdym razem, gdy zmieniają się rekwizyty, zmodyfikuj kod, aby użyć technik zapamiętywania lub przenieś go do statycznego getDerivedStateFromProps. Dowiedz się więcej na:
• Zmień nazwę componentWillReceiveProps na UNSAFE_componentWillReceiveProps, aby ukryć to ostrzeżenie w trybie innym niż ścisły. W React 17.x działa tylko nazwa UNSAFE_. Aby zmienić nazwę wszystkich przestarzałych cykli życia na ich nowe nazwy, możesz uruchomić npx react-codemod rename-unsafe-lifecyclesw folderze źródłowym projektu.

Zaktualizuj następujące składniki: ReactSwipableView

czy jest jakiś sposób, aby pozbyć się tego błędu, próbowałem UNSAFE_componentWillReceiveProps, ale nic się nie zmienia

Wygląda na to, że zostało to już zgłoszone opiekunom.

Teraz, jako użytkownik oprogramowania typu open source, możesz:

• poczekaj, aż naprawią (lub nie naprawią) problem
• bądź fajny i prześlij PR, aby go naprawić :) Oto wszystkie odniesienia do componentWillReceivePropsrepo
• znajdź nowy pakiet do użycia

Ostatecznie nie jest to błąd związany z twoim oprogramowaniem, ale zależności, na których się opiera. Naprawdę to nie jest twoja odpowiedzialność. Jeśli Twoja aplikacja działa, będzie dobrze. Ostrzeżenia z react-dom.development.jsnie pojawią się w produkcji.

Użyj getDerivedStateFromPropszamiastcomponentWillReceiveProps

Na przykład:

Przed:

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

Po:

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

Miałem problemy ze znalezieniem gdzie w moim kodzie wywoływano składnikWillReceiveProps. Zauważyłem w ostrzeżeniu, że wspomina o konkretnym komponencie, „Drawer”, który był częścią używanej przez nas biblioteki ant-d. Po aktualizacji ant-d do najnowszej wersji ostrzeżenie zniknęło.

Jest to częsty błąd występujący w reakcji rodzimego projektu, więc można go rozwiązać, wykonując następujące czynności:

• Najpierw zainstaluj lodash w swoim ojczystym katalogu z reakcjami, tj.

npm i --save lodash

- następnie wpisz następujący kod w pliku .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);
    } 
   };