advertencias `componentWillMount` aunque no se usa explícitamente

9

En mi código, no tengo ningún uso explícito decomponentWillMount , pero aún veo un par de advertencias al ejecutarlo webpack.

react-dom.development.js: 12386 Advertencia: se ha cambiado el nombre de componentWillMount y no se recomienda su uso. Consulte https: /fb.me/react-unsafe-component-lifecycles para más detalles.

  • Mueva el código con efectos secundarios a componentDidMount y establezca el estado inicial en el constructor.
  • Cambie el nombre de componentWillMount a UNSAFE_componentWillMount para suprimir esta advertencia en modo no estricto. En React 17.x, solo funcionará el nombre UNSAFE_. Para cambiar el nombre de todos los ciclos de vida obsoletos a sus nuevos nombres, puede ejecutarlos npx react-codemod rename-unsafe-lifecyclesen la carpeta de origen del proyecto.

Actualice los siguientes componentes: foo, bar

Ejecuté lo sugerido npx react-codemod rename-unsafe-lifecycles, pero la advertencia no desapareció, sino que solo cambió su redacción a

react-dom.development.js: 12386 Advertencia: se ha cambiado el nombre de componentWillMount y no se recomienda su uso. [...]

Aquí, fooy barson componentes personalizados que nuestro equipo escribió, y algunos componentes de bibliotecas externas. Una búsqueda completa de la solución de Visual Studio para componentWillMountno me da ningún resultado. ¿Podría alguien explicarme qué podría haber hecho mal?

Leí en otra pregunta un comentario que decía

No tengo ningún lugar explícito con componentWillMount, pero sí tengo [...] una línea de código después del constructor con state={ tabindex:0 }¿Cómo "muevo" eso al constructor?

La respuesta fue escribir constructor(props) {super(props); this.state = { tabindex:0 }}. ¿Alguien puede explicar lo que estaba pasando aquí, por favor? ¿Qué tipo de patrones tengo que buscar en nuestro código?

Más detalles

    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

javascript reactjs react-props B - rian
fuente
1
probablemente una vieja lib. ¿Qué dice el rastro de la pila?
Joe Lloyd el
Sí, estoy usando antd en la versión 2.xy no puedo cambiar eso debido a problemas de arquitectura. @JoeLloyd Vea el rastro de la pila en mi edición.
B - rian el
Como Joe dijo anteriormente, es casi seguro que está antdusando cWM. Tengo curiosidad por saber qué problemas arquitectónicos te encontrarás con la actualización antd. Parece ser un problema abierto en github con respecto a los métodos obsoletos del ciclo de vida github.com/ant-design/ant-design/issues/9792
DJ2
@ DJ2: es nuestra arquitectura interna la que no funciona con Antd3.
B - rian

Respuestas:

11

Recibes esta advertencia porque componentWillMountestá en desuso en las versiones más nuevas de React. Si no está utilizando en componentWillMountninguna parte, entonces una de sus bibliotecas es y debe actualizarse.

Si te hace sentir mejor, tu versión de producción no mostrará estas advertencias en la consola.

Si no puede actualizar las bibliotecas por cualquier motivo, puede intentar suprimir estos errores en la consola colocando algo como console.warn = () => {}En la parte superior de su Appcomponente, pero no lo recomendaría desde entonces, ya que no podrá usarlo console.warnmás adelante en su consola. código. Lo mejor es aceptarlos como una molestia hasta que pueda actualizar su biblioteca.

Matt Croak
fuente
1
¡La parte sobre la construcción de producción es útil!
B - rian
Por lo que vale, si cargo esta página con mi consola abierta, veo advertencias sobre la instalación de componentes. Me imagino que esto ya no puede ser cierto después de que SO haga algunas actualizaciones en alguna parte.
William Jockusch
1
En mi caso, el emotioncomponente con estilo está causando esta advertencia. Espero que se actualicen pronto.
Uddesh_jain
Gracias. Pero esperaría ver una respuesta más elaborada, que describe un algoritmo para encontrar a los culpables. Como se mencionó en la pregunta, la salida de la advertencia no es muy útil.
Onkeltem
@Onkeltem un algoritmo para encontrar qué biblioteca los está usando? Estoy seguro de cómo se haría eso a menos que tenga acceso a todo el código fuente de las bibliotecas externas y pueda rastrearlos todos para encontrar instancias de componentWillMount. Según el resultado del OP, el problema podría estar relacionado con el arranque (ver el final de más detalles).
Matt Croak