retirando eletiqueta en el método ReactDOM.render () funciona normalmente

Recibo el mismo error en modo estricto antd v4.0.4

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

¿Hay alguna solución con respecto a lo mismo o también se agradecería cualquier sugerencia?

Eliminar el modo estricto solo por un botón es ridículo. Este es un problema legítimo con antd que debe solucionarse.

Estoy teniendo el mismo error

Necesita hacer mucha migración, como # 9870

Lo mismo aquí después de una nueva instalación usando la guía https://ant.design/docs/react/use-in-typescript

Tengo el mismo problema

desc

Advertencia: findDOMNode está obsoleto en StrictMode. A findDOMNode se le pasó una instancia de Wave que está dentro de StrictMode. En su lugar, agregue una referencia directamente al elemento al que desea hacer referencia. Obtenga más información sobre cómo usar referencias de forma segura aquí: https://fb.me/react-strict-mode-find-node

resolver

ReactDOM.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>,
  ,
  document.getElementById('root')
);

Tengo el mismo problema. ¿Puedes arreglarlo, por favor?

Tengo el mismo problema. ¿Puedes arreglarlo, por favor?

Tengo el mismo problema, pero estoy usando otros componentes, por lo que el problema no es solo el <Button /> .

Tengo el mismo problema. Estoy usando

<InputMask
    mask='99/99/9999'
    onFocus={onFocus} onBlur={onBlur}
    defaultValue={fields.birthdate.value}
    error={fields.birthdate.error}
    helperText={fields.birthdate.helperText}
    id='birthdate' name='birthdate' label='Birthdate MM/DD/YYYY'
    type='tel' variant='filled' margin='dense'
>
    {(inputProps) =>
        <TextField {...inputProps} />
    }
</InputMask>

La línea en cuestión parece ser la línea.

desactivar el modo estricto no es realmente una opción. como podemos arreglar esto?

desactivar el modo estricto no es realmente una opción. como podemos arreglar esto?

Contribuya al código de migración sobre esto.

También tengo este problema en los componentes SubMenu y Select.

Advertencia: Se ha detectado la API de contexto heredado dentro de un árbol de modo estricto.
La API anterior será compatible con todas las versiones 16.x, pero las aplicaciones que la utilicen deberían migrar a la nueva versión.
Actualice los siguientes componentes: SubMenu

Tengo la misma advertencia

Mismo problema

El mismo problema también :(

Uno más aquí, trabajando con discapacitados, pero realmente espero que no sea una solución a largo plazo.

Mismo problema

El mismo problema aquí.

El mismo problema aquí, ¿el equipo de Ant ya tiene una solución?

El menú también produce esta advertencia:
<Menu mode="horizontal" >
Si elimino el modo horizontal, la advertencia desaparece. Pero no es una solución.

Supongo que podría ser muy importante refactorizar esto. Puede que sea necesario profundizar en varios componentes.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DOMWrap which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in ul (created by DOMWrap)
    in DOMWrap (created by SubPopupMenu)
    in SubPopupMenu (created by Connect(SubPopupMenu))
    in Connect(SubPopupMenu) (created by Menu)
    in Provider (created by Menu)
    in Menu (created by Context.Consumer)
    in InternalMenu (created by Context.Consumer)

"antd": "^4.1.5"
"react": "^16.13.1"

Mismo problema, ayuda !!! Por favor.

Hola @latobibor. Nos gusta mucho su propuesta / comentarios, bienvenido a enviarnos una solicitud de extracción. Envíe su solicitud de extracción a la rama correspondiente (rama de función para la nueva función, maestra para corrección de errores y otros cambios), complete la solicitud de extracción Plantilla aquí, proporcione el registro de cambios / TypeScript / documentación / casos de prueba si es necesario y asegúrese de que CI se apruebe, lo revisaremos pronto.

Hola @latobibor, estamos totalmente de acuerdo con su sugerencia / comentario, no dude en crear una solicitud de plantilla preestablecida en la solicitud de extracción y proporcione el registro de cambios correspondiente, las definiciones de TypeScript, los casos de prueba, los documentos, etc.que se requieren para los cambios. Y para asegurarnos de que se apruebe el IC, lo revisaremos lo antes posible, ¡gracias de antemano y esperamos su contribución!

Mismo problema

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in button (created by Context.Consumer)
    in Wave (created by Context.Consumer)
    in Button (at SignInPage/index.js:93)
    in div (created by FormItemInput)
    in div (created by FormItemInput)
    in div (created by Context.Consumer)
    in Col (created by FormItemInput)
    in FormItemInput (created by FormItem)
    in div (created by Context.Consumer)
    in Row (created by FormItem)
    in FormItem (at SignInPage/index.js:92)
    in form (created by ForwardRef(Form))
    in ForwardRef(Form) (created by ForwardRef(InternalForm))
    in SizeContextProvider (created by ForwardRef(InternalForm))
    in ForwardRef(InternalForm) (at SignInPage/index.js:43)
    in div (at SignInPage/index.js:42)
    in div (at SignInPage/index.js:33)
    in div (created by Context.Consumer)
    in Col (at SignInPage/index.js:32)
    in div (created by Context.Consumer)
    in Row (at SignInPage/index.js:31)
    in SignInPage (at AuthLayout/index.js:14)
    in Route (at AuthLayout/index.js:10)
    in Switch (at AuthLayout/index.js:7)
    in AuthLayout (at publicRoute.js:11)
    in Route (at publicRoute.js:9)
    in PublicRoute (at App.js:17)
    in Switch (at App.js:16)
    in Suspense (at App.js:15)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:14)
    in div (at App.js:13)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

El mismo problema, acabo de seguir el documento de uso en mecanografiado , con una demostración simple como esta:

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

Pero tengo este error index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here en la consola.

¿Como arreglar?

Creo que deberíamos desactivar React.StrictMode y esperar hasta que el equipo de diseño de hormigas solucione este problema y actualice el paquete.

mismo problema aquí, y

Uno más aquí, trabajando con discapacitados, pero realmente espero que no sea una solución a largo plazo.

exactamente

mismo problema en la última versión (antd 4.2.0)

Mismo problema
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

+1

Mismo problema aquí
.
¡Una solución sería increíble! ¡Gracias al equipo antd!

mismo problema

entonces alguna solución?

Mas uno

Mismo problema.

Si tiene este problema también, ¡corríjalo!

También viendo este problema con Button.

Por favor, arregla

Frente al mismo problema aquí

Tengo el mismo problema. ¿Alguien está trabajando en este problema?

¿Estás seguro de que tiene algo que ver con antd? Cambié a antd 3. y sigo teniendo el mismo problema

Sí, porque estoy usando el componente.

igual que aquí. Parece un tema bastante urgente. Ant D, ¿dónde estás?

¿Hay alguien trabajando actualmente en un PR? Puedo empezar a escribir uno

@caelinsutch Hasta donde yo sé, nadie.

El problema principal está en el archivo wave.tsx debido al uso de findDOMNode. Existen varios artículos sobre migración, como este o este

Problema resuelto usando:

Inspirado en el ejemplo oficial: https://ant.design/components/form-cn/

No creo que su ejemplo resuelva mi caso: https://github.com/ant-design/ant-design/issues/22493#issuecomment -619562638. Y tampoco se sabe qué hiciste en absoluto. Si hiciste algo.

@CathyXian Envolver todos los botones en un formulario no resuelve el problema ya que la mayoría de las veces los componentes <Button> no se utilizan en los formularios, sino que tienen eventos onClick asociados a ellos.

Como señaló @caelinsutch , el componente Wave utiliza el método obsoleto findDOMNode.

Comprobando rápidamente qué componentes utilizan ese método, encontré:

• Botón https://github.com/ant-design/ant-design/blob/dff19af744cce8920f8038f3d32a3051cae7ef50/components/button/button.tsx#L265 -L269
  Si usa (type = "link") no usará el componente Wave, eso es lo que mencionó @CathyXian .

• Cambiar https://github.com/ant-design/ant-design/blob/dabec4c8331c6171aaac08ad8b347c6ae754f032/components/switch/index.tsx#L65

• Etiqueta https://github.com/ant-design/ant-design/blob/e1299bfcc97a97078c51f33ae939d815e4eacf7f/components/tag/index.tsx#L114 -L127

El componente de onda debe refactorizarse para eliminar el método anterior.
Y, tal vez otros componentes también deberían deshacerse de ese método: https://github.com/ant-design/ant-design/search?q=findDOMNode&unscoped_q=findDOMNode

por alguna extraña razón, no se reproduce con lo siguiente:

  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

por alguna extraña razón, no se reproduce con lo siguiente:

  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

Intenté esto y funcionó como un encanto, pero esa pregunta es, ¿son soluciones a largo plazo?

por alguna extraña razón, no se reproduce con lo siguiente:

  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

Esto no es diferente a simplemente eliminar el <React.StrictMode> envuelto alrededor de <App> . Lo cual no debería ser necesario.

También sucedió con el componente Tabs

Igual que aquí,
¿Podría darle una prioridad más alta?

mismo problema 😓

Tengo el mismo problema aquí, ¿alguien ha encontrado una solución?

Tengo el mismo problema aquí, ¿alguien ha encontrado una solución?

Quiero decir, hay una solución como se describe anteriormente, refactorizando el código, probablemente lo abordaré más adelante esta semana

¡Gracias! ¡Yo también tengo el mismo problema!

mismo problema

el mismo problema

                  `<Button
                        htmlType="button"
                        icon={<LoginOutlined />}
                        onClick={this.onLogin.bind(this)}
                    >
                        Welcome Back
                    </Button>`

Utilicé el atributo htmlType y todavía tengo este problema. La eliminación de StrictMode no es una solución. @antd , proporcione la solución.

mismo problema

Cualquier solución, mismo problema ...

mismo problema al usar SubMenu.
"reaccionar": "^ 16.13.1",
"react-dom": "^ 16.13.1",
"antd": "^ 4.3.1",

El mismo problema que estoy usando el botón en form.item

¿Por qué no hace una investigación general sobre este problema? @ afc163

Mismo problema, alguna solución?

El mismo problema con un submenú en el menú vertical,

El mismo problema aquí. Sale del componente Button , pero creo que en realidad está en el componente Wave , en componentDidMount y onTransitionStart . ¿Podríamos usar una referencia en lugar de llamar a findDOMNode(this) ?

yo también

+1

+1

+1

Deseo que los desarrolladores sigan las convenciones y eviten poner +1 para fastidiar a todos los que se suscribieron a este hilo por correo electrónico. Eso es muy molesto y poco profesional, @kreuzhofer @Lemii @moderndegree @TechieQian @lefterisk y otros

El mismo problema aquí cuando se usa el menú Ant Design

mismo problema aquí. Necesito una solución lo antes posible

El mismo problema aquí cuando se usa el botón Ant Design

+1

El mismo problema aquí.

El mismo problema aquí, realmente me encantaría una solución o solución que no requiera apagar el modo estricto.

Estoy enfrentando el mismo problema

Mismo problema aquí

mismo problema con el submenú

@ Equipo de

¡Gracias por todo lo que hacen! :)

Acabo de instalar antd en mi proyecto React TypeScript y tan pronto como usé un botón, apareció el error. Es triste saber que no hay solución para esto: l

Lo mismo ocurre con el botón ant.design.
"antd": "^ 4.6.3",
"reaccionar": "^ 16.13.1",
"react-dom": "^ 16.13.1",

¿Alguna actualización? ¿O una solución alternativa?

mismo problema

Se informa de un error en la primera línea de código. . . Aún no reparado. .

Acabo de descubrir este problema al usar un botón en mi proyecto.
Estoy en "antd": "^ 4.6.2"

mismo problema aquí usando el Modal.
Recibo 2 advertencias:
`index.js: 1 Advertencia: No se recomienda usar UNSAFE_componentWillReceiveProps en modo estricto y puede indicar errores en su código. Consulte https://fb.me/react-unsafe-component-lifecycles para obtener más detalles.

• Mueva el código de obtención de datos o los efectos secundarios a componentDidUpdate.
• Si está actualizando el estado cada vez que cambian los accesorios, refactorice su código para usar técnicas de memorización o muévalo a getDerivedStateFromProps estático.

tanto como :
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of AnimateChild which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

alguna actualización ?

Mismo problema.

Esto necesita ser arreglado.

Problema aquí también en 4.6.6 cuando se usa un botón

Las comprobaciones de modo estricto se ejecutan solo en modo de desarrollo; no afectan la construcción de producción. Entonces el mensaje puede volverse molesto ...
Claro, comentarlo no es una gran respuesta, pero si no funciona, ¿ofrece una solución?

El mismo problema con Ant 4.6.6 y reaccionar 16.13.1 :(

Chicos, solo una sugerencia en caso de que este error sea molesto para ustedes:

const isDev = process.env.NODE_ENV === 'development'

ReactDOM.render(
  isDev ? <App /> : (
    <React.StrictMode>
      <App />
    </React.StrictMode>
  ),
  document.getElementById('root')
)

¡Salud!

@rafaelcalhau
Es básicamente lo mismo que eliminar StrictMode, ya que solo realiza validaciones en el entorno de desarrollo. Entonces, simplemente deshabilitó todas las comprobaciones para su propio código, que es exactamente para lo que está hecho StrictMode.

mismo problema.

Mismo problema.

Mismo problema

@ enoh-barbu No creo que nadie esté intentando solucionar este problema.

Por mucho que deteste ver un error cuando abro la consola, eliminar el modo estricto por el bien de este error es ridículo por decir lo menos.

Arriba

¿Qué tal esto si no tenemos ninguna solución?

antes de)

después)

mismo problema hasta ahora.

mismo problema hasta ahora.

mismo problema hasta ahora

el mismo problema todavía.

Todavía roto

¿Qué tal esto si no tenemos ninguna solución?

antes de)
(imagen grande)

después)
(imagen grande)

Aún mejor: si cierras la consola, todas las advertencias desaparecen 😄

Bromas aparte: afrontar este problema también en varios componentes

sigue siendo el mismo problema
ayuda a deshacerse de React.StrictMode

Pregunta a cualquiera que siga el hilo ... ¿qué significa esto incluso (el error específicamente), y alguien ha mirado el código para ver qué podría estar causándolo (o por qué es importante)? Honestamente, trataría de solucionarlo, pero no tengo el tiempo (o el conocimiento de la base de código) para investigar y ver por qué está sucediendo o en qué parte de la base de código existe el error.

editar: claramente debo agregar que yo también experimento el error (aunque no lo tuve hace varios días, así que me pregunto cuáles son las circunstancias específicas que desencadenan el error, es decir, en qué situaciones se está utilizando el método en desuso findDOMNode llamado en Button?)

Quizás deberíamos comenzar a tratar este hilo como un esfuerzo de colaboración y enumerar situaciones en las que experimentamos la advertencia y comenzar a solucionar problemas en lugar de simplemente decir "sí, tiene un error, por favor corríjalo".

@shawnpetros
No soy un experto de ninguna manera en el código base, pero lo uso con la frecuencia suficiente para haber encontrado el problema no solo en el elemento del botón. Pasé un poco de tiempo investigando y aprendí que el uso principal de findDomNode ocurre en el componente de onda. ¿Qué es ola? De lo que puedo reunir una herramienta para animar cosas, como los componentes de los botones, entre otros.

• Si tiene curiosidad, el delincuente aparece aquí: https://github.com/ant-design/ant-design/search?q=findDomNode
• y se puede ver en acción aquí: https://github.com/ant-design/ant-design/blob/820aa04a96d6b1ced9697bb9293a293dfb676364/components/button/button.tsx#L295

Además de deshabilitar el modo estricto (que es a lo que recurrí hasta que esté disponible una solución más adecuada, o tenga tiempo para aprender más sobre wave para proponer uno yo mismo ...), por el aspecto del código, podría ser más fácil de agregar un PR para usar accesorios para deshabilitar el uso de wave, que para reemplazar completamente el uso de findDomNode por ahora. Un poco de búsqueda en Google revelará que no es solo un problema de diseño de hormigas (es decir: https://stackoverflow.com/questions/61220424/material-ui-drawer-finddomnode-is-deprecated-in-strictmode), así que supongo no es la solución más fácil de implementar, de lo contrario, alguien ya lo habría aprovechado. Dado que cualquier cambio afectaría no solo al botón, es posible que tengamos que esperar hasta que los creadores del diseño de hormigas tengan tiempo para priorizar esto más para que puedan probar a fondo una solución adecuada ... Ciertamente aprecio todo el trabajo que han hecho para consígalo aquí, así que estoy seguro de que cualquiera que sea la solución será algo que funcione tan bien como el resto.

editar:
Para cualquiera que tenga curiosidad por saber por qué esto podría no ser una "solución fácil", aquí hay algunas soluciones sugeridas para deshacerse de findDomNode. https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660
asumiendo que afecta a múltiples componentes, esta sería una tarea más grande de la que cualquiera tiene tiempo "libre" para ...

Seguimiento https://github.com/ant-design/ant-design/issues/26136

Mismo problema

Este boleto ha estado abierto por más de 7 meses.

Mismo

27755 hay una solicitud de extracción para solucionar este problema

+1

No conozco las reglas de este proyecto, pero en otras comunidades se desaconseja el envío de spam de comentarios "iguales" y "+1" porque

• si algo es un problema urgente, los desarrolladores suelen ser conscientes de ello,
• no agrega nada sustancial para resolver el problema,
• los desarrolladores necesitan un tiempo para revisar sus notificaciones,
• le quita tiempo a otros observadores, que también tienen mucho spam en sus notificaciones.

Quizás simplemente podamos expresar nuestro apoyo a este problema utilizando: +1: en el problema principal.

Corregido en https://github.com/ant-design/ant-design/pull/27755

Gracias por trabajar en la solución, me encanta la biblioteca. Desafortunadamente, sigo viendo esta advertencia con [email protected].
Solo aparece después de que se activa el validador asíncrono cuando se usa una entrada dentro de un formulario.

Tengo el mismo problema con [email protected]