avisos `componentWillMount`, embora não tenham sido usados ​​explicitamente

9

No meu código, não tenho nenhum uso explícito decomponentWillMount , mas ainda estou vendo alguns avisos ao executar webpack.

react-dom.development.js: 12386 Aviso: componentWillMount foi renomeado e não é recomendado para uso. Consulte https: /fb.me/react-unsafe-component-lifecycles para obter detalhes.

  • Mova o código com efeitos colaterais para componentDidMount e defina o estado inicial no construtor.
  • Renomeie componentWillMount para UNSAFE_componentWillMount 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: foo, bar

Executei o sugerido npx react-codemod rename-unsafe-lifecycles, mas o aviso não foi embora, mas apenas alterei sua redação para

react-dom.development.js: 12386 Aviso: componentWillMount foi renomeado e não é recomendado para uso. [...]

Aqui, fooe barsão ambos componentes personalizados nossa equipe escreveu, e alguns componentes de bibliotecas externas. Uma pesquisa completa da solução do Visual Studio para componentWillMountdoese não me deu nenhum resultado. Alguém poderia me explicar o que eu poderia ter feito de errado?

Eu li em outra pergunta um comentário afirmando

Eu não tenho nenhum lugar explícito com componentWillMount, mas tenho uma [...] linha de código após o construtor com state={ tabindex:0 }Como eu "movo" isso para o construtor?

A resposta foi escrever constructor(props) {super(props); this.state = { tabindex:0 }}. Alguém pode explicar o que estava acontecendo aqui, por favor? Que tipo de padrões eu tenho que procurar em nosso código?

Detalhes adicionais

    printWarning    @   react-dom.development.js:12386
lowPriorityWarningWithoutStack  @   react-dom.development.js:12407
./node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings   @   react-dom.development.js:12577
flushRenderPhaseStrictModeWarningsInDEV @   react-dom.development.js:25641
commitRootImpl  @   react-dom.development.js:24871
unstable_runWithPriority    @   scheduler.development.js:815
runWithPriority$2   @   react-dom.development.js:12188
commitRoot  @   react-dom.development.js:24865
finishSyncRender    @   react-dom.development.js:24251
performSyncWorkOnRoot   @   react-dom.development.js:24223
scheduleUpdateOnFiber   @   react-dom.development.js:23590
scheduleRootUpdate  @   react-dom.development.js:26945
updateContainerAtExpirationTime @   react-dom.development.js:26973
updateContainer @   react-dom.development.js:27075
(anonymous) @   react-dom.development.js:27663
unbatchedUpdates    @   react-dom.development.js:24375
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:27662
render  @   react-dom.development.js:27756
./src/index.tsx @   index.tsx:52
__webpack_require__ @   bootstrap:19
0   @   bundle.js:152632
__webpack_require__ @   bootstrap:19
(anonymous) @   bootstrap:83
(anonymous) @   bootstrap:83

Relacionado

B - rian
fonte
1
provavelmente uma antiga lib. o que o rastreamento de pilha diz?
9119 Joe
Sim, estou usando o antd na versão 2.xe não posso mudar isso devido a problemas de arquitetura. @JoeLloyd Veja o rastreamento de pilha na minha edição.
precisa
Como Joe disse acima, quase certamente está antdusando cWM. Estou curioso para saber quais problemas de arquitetura você enfrentaria ao atualizar antd? Parece ser uma questão em aberto no github sobre os métodos de ciclo de vida desatualizados github.com/ant-design/ant-design/issues/9792
DJ2
@ DJ2: É a nossa arquitetura interna que não funciona com o Antd3.
precisa

Respostas:

11

Você recebeu esse aviso porque componentWillMountfoi descontinuado nas versões mais recentes do React. Se você não estiver usando componentWillMountnenhum lugar, uma das suas bibliotecas é e precisa ser atualizada.

Se você se sentir melhor, sua compilação de produção não mostrará esses avisos no console.

Se você não conseguir atualizar as bibliotecas por qualquer motivo, tente suprimir esses erros no console colocando algo como console.warn = () => {}Na parte superior do seu Appcomponente, mas eu não recomendo isso, pois você não poderá usá-lo console.warnposteriormente no seu código. É melhor aceitá-los como um aborrecimento até que você possa atualizar sua biblioteca.

Matt Croak
fonte
1
A parte sobre a construção da produção é útil!
precisa
Quanto vale a pena, se carregar esta página com o console aberto, vejo avisos sobre a montagem de componentes. Eu imagino que isso não seja mais verdade depois que o SO fizer algumas atualizações em algum lugar.
William Jockusch
1
No meu caso, o emotioncomponente estilizado está causando esse aviso. Espero que eles atualizem em breve.
Uddesh_jain 18/02
Obrigado. Mas eu esperaria ver uma resposta mais elaborada, descrevendo um algoritmo para encontrar os culpados. Como foi mencionado na pergunta, a saída do aviso não é muito útil.
Onkeltem
@Onkeltem um algoritmo para descobrir qual biblioteca está usando-os? Tenho certeza de como isso seria feito, a menos que você tenha acesso a todo o código-fonte das bibliotecas externas e possa rastrear todos eles para encontrar instâncias do componentWillMount. De acordo com a saída do OP, o problema pode estar na inicialização (consulte o final de mais detalhes).
Matt Croak