componentWillReceiveProps의 이름이 변경되었습니다

ReactSwipableView 패키지를 사용하는 Material ui SwipeableViews를 사용하고 있는데 콘솔 에서이 오류가 발생합니다.

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의 일부인 "Drawer"라는 특정 구성 요소를 언급했습니다. ant-d를 최신 버전으로 업그레이드 한 후 경고가 사라졌습니다.

반응 네이티브 프로젝트에서 발생하는 일반적인 오류이므로 다음 단계를 통해 해결할 수 있습니다.

• 먼저 반응 네이티브 프로젝트 디렉토리에 lodash를 설치하십시오.

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