componentWillReceiveProps foi renomeado

Estou usando a interface do usuário Material SwipeableViews Que usam o pacote ReactSwipableView, estou recebendo esse erro no console

react-dom.development.js: 12466 Aviso: componentWillReceiveProps foi renomeado e não é recomendado para uso. Veja para detalhes.

• Mova o código de busca de dados ou efeitos colaterais para componentDidUpdate.
• Se você estiver atualizando o estado sempre que os objetos forem alterados, refatorar seu código para usar técnicas de memorização ou movê-lo para estático getDerivedStateFromProps. Saiba mais em:
• Renomeie componentWillReceiveProps para UNSAFE_componentWillReceiveProps para suprimir esse aviso no modo não estrito. No React 17.x, apenas o nome UNSAFE_ funcionará. Para renomear todos os ciclos de vida descontinuados com seus novos nomes, você pode executar npx react-codemod rename-unsafe-lifecyclesna pasta de origem do projeto.

Atualize os seguintes componentes: ReactSwipableView

existe alguma maneira de se livrar desse erro, tentei UNSAFE_componentWillReceiveProps, mas nada mudou

Parece que isso já foi relatado aos mantenedores.

Agora, como consumidor de um software de código aberto, você pode:

• espere que eles resolvam (ou não consertem) o problema
• seja legal e envie um PR para corrigi-lo para eles :) Aqui estão todas as referências componentWillReceivePropsno repositório
• encontre um novo pacote para usar

Por fim, esse não é um erro relacionado ao seu software, mas às dependências em que ele se baseia. Não é realmente sua responsabilidade consertar isso. Se seu aplicativo for executado, tudo ficará bem. Os avisos de react-dom.development.jsnão aparecerão em produção.

Use em getDerivedStateFromPropsvez decomponentWillReceiveProps

Por exemplo:

Antes:

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

Depois de:

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

Ocorreu um problema ao localizar onde o meu código componentWillReceiveProps estava sendo chamado. Percebi no aviso que ele mencionava um componente específico, "Drawer", que fazia parte do ant-d lib que estamos usando. Depois de atualizar o ant-d para a versão mais recente, o aviso foi embora.

É um erro comum que ocorreu ao reagir ao projeto nativo, para que possa ser resolvido seguindo as etapas:

• Primeiro instale o lodash no diretório do projeto nativo do react, ou seja,

npm i --save lodash

-depois escreva o seguinte código no seu arquivo .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);
    } 
   };