componentWillReceiveProps wurde umbenannt

Ich verwende Material ui SwipeableViews. Wenn Sie das ReactSwipableView-Paket verwenden, wird dieser Fehler auf der Konsole angezeigt

react-dom.development.js: 12466 Warnung: componentWillReceiveProps wurde umbenannt und wird nicht zur Verwendung empfohlen. Siehe für Details.

• Verschieben Sie Code oder Nebenwirkungen zum Abrufen von Daten nach componentDidUpdate.
• Wenn Sie den Status aktualisieren, wenn sich Requisiten ändern, überarbeiten Sie Ihren Code, um Memoisierungstechniken zu verwenden, oder verschieben Sie ihn in statische getDerivedStateFromProps. Erfahren Sie mehr unter:
• Benennen Sie componentWillReceiveProps in UNSAFE_componentWillReceiveProps um, um diese Warnung im nicht strengen Modus zu unterdrücken. In React 17.x funktioniert nur der Name UNSAFE_. Um alle veralteten Lebenszyklen in ihre neuen Namen umzubenennen, können Sie sie npx react-codemod rename-unsafe-lifecyclesin Ihrem Projektquellordner ausführen .

Bitte aktualisieren Sie die folgenden Komponenten: ReactSwipableView

Gibt es eine Möglichkeit, diesen Fehler zu beseitigen? Ich habe UNSAFE_componentWillReceiveProps ausprobiert, aber nichts hat sich geändert

Es scheint, dass dies den Betreuern bereits gemeldet wurde.

Als Verbraucher einer Open Source-Software können Sie nun:

• Warten Sie, bis sie das Problem behoben haben (oder nicht behoben haben)
• Sei cool und reiche eine PR ein, um das Problem zu beheben :) Hier sind alle Verweise auf componentWillReceivePropsdas Repo
• Finde ein neues Paket zur Verwendung

Letztendlich ist dies kein Fehler in Bezug auf Ihre Software, sondern die Abhängigkeiten, auf die sie angewiesen ist. Es liegt nicht wirklich in Ihrer Verantwortung, diese zu beheben. Wenn Ihre App ausgeführt wird, ist dies in Ordnung. Warnungen von react-dom.development.jswerden in der Produktion nicht angezeigt.

Verwenden Sie getDerivedStateFromPropsanstelle voncomponentWillReceiveProps

Zum Beispiel:

Vor:

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

Nach:

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

Ich hatte Probleme zu finden, wo in meiner Codekomponente WillReceiveProps aufgerufen wurde. Ich habe in der Warnung bemerkt, dass es sich um eine bestimmte Komponente handelt, "Drawer", die Teil der von uns verwendeten ant-d lib ist. Nach dem Upgrade von ant-d auf die neueste Version wurde die Warnung gelöscht.

Es ist ein häufiger Fehler, der im reaktiven nativen Projekt aufgetreten ist. Daher kann er durch die folgenden Schritte behoben werden:

• Installieren Sie zuerst lodash in Ihrem nativen Projektverzeichnis, dh:

npm i --save lodash

-Nachdem schreiben Sie folgenden Code in Ihre .js-Datei:

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