componentWillReceivePropsの名前が変更されました

Material ui SwipeableViewsを使用しています。ReactSwipableViewパッケージを使用していますが、コンソールでこのエラーが発生します。

react-dom.development.js：12466警告：componentWillReceivePropsの名前が変更されたため、使用をお勧めしません。詳細については、を参照してください。

• データ取得コードまたは副作用をcomponentDidUpdateに移動します。
• 小道具が変更されるたびに状態を更新する場合は、メモ化手法を使用するようにコードをリファクタリングするか、静的なgetDerivedStateFromPropsに移動します。詳細については：
• 非厳密モードでこの警告を抑制するには、componentWillReceivePropsの名前をUNSAFE_componentWillReceivePropsに変更します。React 17.xでは、UNSAFE_名のみが機能します。非推奨のすべてのライフサイクルの名前を新しい名前に変更するにnpx react-codemod rename-unsafe-lifecyclesは、プロジェクトのソースフォルダーで実行できます。

次のコンポーネントを更新してください：ReactSwipableView

このエラーを取り除く方法はありますかUNSAFE_componentWillReceivePropsを試しましたが、何も変化しません

これはすでにメンテナに報告されているようです。

さて、オープンソースソフトウェアの消費者として、あなたは次のことができます：

• 彼らが問題を修正する（または修正しない）のを待つ
• 彼らのためにそれを修正するためにクールでPRを提出してください:) ここにすべての参照がありますcomponentWillReceivePropsがリポジトリ内の
• 使用する新しいパッケージを見つける

結局のところ、これはソフトウェアに関連するエラーではなく、ソフトウェアが依存している依存関係です。それらを修正するのは本当にあなたの責任ではありません。アプリが実行されれば問題ありません。からの警告react-dom.development.jsは本番環境では表示されません。

のgetDerivedStateFromProps代わりに使用componentWillReceiveProps

例えば：

前：

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

後：

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

コードのどこでcomponentWillReceivePropsが呼び出されているかを見つけるのに問題がありました。警告で、使用しているant-d libの一部である「ドロワー」という特定のコンポーネントに言及していることに気付きました。ant-dを最新バージョンにアップグレードした後、警告は消えました。

これは、reactネイティブプロジェクトで発生する一般的なエラーです。次の手順で解決できます。

• 最初にlodashをreactネイティブプロジェクトディレクトリにインストールします。

npm i --save lodash

-その後、.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);
    } 
   };