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-lifecycles
en 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í, foo
y bar
son componentes personalizados que nuestro equipo escribió, y algunos componentes de bibliotecas externas. Una búsqueda completa de la solución de Visual Studio para componentWillMount
no 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 constate={ 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
antd
usando 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