aposentando otag no método ReactDOM.render () funciona normalmente

Estou recebendo o mesmo erro no modo estrito 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

Existe alguma solução em relação ao mesmo ou quaisquer sugestões também seriam apreciadas.

Remover o modo estrito apenas por causa de um botão é ridículo. Este é um problema legítimo com antd que precisa ser corrigido.

Estou recebendo o mesmo erro

Precisa fazer muitas migrações, como # 9870

O mesmo aqui após uma nova instalação usando o guia https://ant.design/docs/react/use-in-typescript

Eu tenho o mesmo problema

desc

Aviso: findDOMNode está obsoleto em StrictMode. findDOMNode recebeu uma instância de Wave que está dentro de StrictMode. Em vez disso, adicione um ref diretamente ao elemento que deseja referenciar. Saiba mais sobre como usar refs com segurança aqui: https://fb.me/react-strict-mode-find-node

resolver

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

Eu tenho o mesmo problema. Você pode consertar isso, por favor?

Eu tenho o mesmo problema. Você pode consertar isso, por favor?

Eu tenho o mesmo problema, mas estou usando outros componentes, então o problema não é apenas <Button /> .

Eu tenho o mesmo problema. estou a usar

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

A linha em questão parece ser o linha.

desativar o modo estrito não é realmente uma opção. Como podemos consertar isso?

desativar o modo estrito não é realmente uma opção. Como podemos consertar isso?

Contribua com o código de migração sobre isso.

Também estou tendo esse problema nos componentes SubMenu e Select.

Aviso: a API de contexto legado foi detectada em uma árvore de modo estrito.
A API antiga terá suporte em todas as versões 16.x, mas os aplicativos que a usam devem migrar para a nova versão.
Atualize os seguintes componentes: SubMenu

Recebi o mesmo aviso

O mesmo problema

O mesmo problema também :(

Mais um aqui, trabalhando com deficientes, mas realmente espero que não seja uma solução de longo prazo.

O mesmo problema

Mesmo problema aqui.

Mesmo problema aqui, o time Ant já tem uma solução?

O menu também produz este aviso:
<Menu mode="horizontal" >
Se eu remover o modo horizontal, o aviso desaparece. Mas não é uma solução.

Acho que pode ser uma grande coisa refatorar isso. Pode ser necessário explorar vários 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"

Mesmo problema, ajuda !!! por favor.

Olá @latobibor. Gostamos totalmente da sua proposta / feedback, bem-vindo para nos enviar um Pull Request para ele. Por favor, envie o seu Pull Request para o branch apropriado (feature branch para o novo recurso, master para bugfix e outras mudanças), preencha o Pull Request Modelo aqui, forneça changelog / TypeScript / documentation / casos de teste se necessário e certifique-se de que o CI foi aprovado, iremos revisá-lo em breve. Agradeço antecipadamente e aguardamos sua contribuição!

Olá @latobibor, concordamos totalmente com sua sugestão / feedback, sinta-se à vontade neste warehouse para criar uma solicitação pull para resolver este problema. Envie o Pull Request para o branch correto (novos recursos para o branch de recursos, outros para o branch master), certifique-se de preencher o modelo predefinido no Pull Request e fornecer o changelog correspondente, definições de TypeScript, casos de teste, documentos, etc. necessários para as alterações , E para garantir que o CI seja aprovado, revisaremos o mais rápido possível, agradecemos antecipadamente e aguardamos sua contribuição!

O mesmo 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)

O mesmo problema, acabei de seguir o documento use-in-typescript , com uma demonstração simples como esta:

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

Mas tem este erro 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 no console.

Como consertar?

Acho que devemos desligar o React.StrictMode e esperar até que a equipe de design do ant conserte o problema e atualize o pacote.

mesmo problema aqui, e

Mais um aqui, trabalhando com deficientes, mas realmente espero que não seja uma solução de longo prazo.

exatamente

mesmo problema na versão mais recente (antd 4.2.0)

O mesmo 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

Mesmo problema aqui
.
Uma correção seria incrível! Obrigado antd equipe!

o mesmo problema

então alguma solução?

Mais um

O mesmo problema.

Tendo este problema também, corrija!

Também vejo esse problema com o botão.

Por favor conserte

Enfrentando o mesmo problema aqui

Estou tendo o mesmo problema. Alguém está trabalhando neste problema?

Tem certeza que tem algo a ver com antd? Mudei para antd 3. e ainda tenho o mesmo problema

Sim, porque estou usando o componente.

o mesmo aqui. Parece uma questão urgente. Formiga D, onde você está?

Há alguém trabalhando atualmente em um PR? Posso começar a escrever um

@caelinsutch Pelo que eu sei, ninguém.

O problema principal está no arquivo wave.tsx devido ao uso de findDOMNode. Existem vários artigos de migração, como este ou este

Problema resolvido usando:

Inspirado no exemplo oficial: https://ant.design/components/form-cn/

Não acho que seu exemplo resolva meu caso: https://github.com/ant-design/ant-design/issues/22493#issuecomment -619562638. E também não se sabe o que você fez. Se você fez alguma coisa.

@CathyXian Empacotar todos os botões em um formulário não resolve o problema, pois na maioria das vezes <Button> componentes não são usados ​​em formulários, mas, em vez disso, têm onClick eventos associados a eles.

Como @caelinsutch apontou, o componente Wave está usando o método obsoleto findDOMNode.

Verificando rapidamente quais componentes usam esse método, descobri:

• Botão https://github.com/ant-design/ant-design/blob/dff19af744cce8920f8038f3d32a3051cae7ef50/components/button/button.tsx#L265 -L269
  Se você usar (type = "link") ele não usará o componente Wave, foi o que @CathyXian mencionou.

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

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

O componente de onda deve ser refatorado para remover o método antigo.
E, talvez, outros componentes devam se livrar desse método também: https://github.com/ant-design/ant-design/search?q=findDOMNode&unscoped_q=findDOMNode

por algum tipo de motivo estranho, ele não se reproduz com o seguinte:

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

por algum tipo de motivo estranho, ele não se reproduz com o seguinte:

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

Eu tentei isso e funcionou como um encanto, mas a questão é, são soluções de longo prazo?

por algum tipo de motivo estranho, ele não se reproduz com o seguinte:

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

Isso não é diferente de apenas remover o <React.StrictMode> embrulhado em torno de <App> . O que não deveria ser necessário.

Também aconteceu com o conponente Tabs

O mesmo aqui,
você poderia dar uma prioridade mais alta?

mesmo problema 😓

Estou com o mesmo problema aqui, alguém encontrou uma solução?

Estou com o mesmo problema aqui, alguém encontrou uma solução?

Quer dizer, há uma solução conforme descrito acima, refatorando o código, provavelmente irei tratá-la ainda esta semana

Obrigado! Também estou tendo o mesmo problema!

o mesmo problema

mesmo problema

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

Usei o atributo htmlType e ainda estou com esse problema. A remoção de StrictMode não é uma solução. @antd forneça a solução.

o mesmo problema

Qualquer solução, mesmo problema ....

mesmo problema ao usar o SubMenu.
"react": "^ 16.13.1",
"react-dom": "^ 16.13.1",
"antd": "^ 4.3.1",

Mesmo problema que estou usando o botão no form.item

Por que você não faz uma investigação geral sobre este problema? @ afc163

Mesmo problema, alguma solução?

O mesmo problema com um submenu no menu vertical,

Mesmo problema aqui. Está saindo do componente Button , mas acho que na verdade está no componente Wave , em componentDidMount e onTransitionStart . Poderíamos apenas usar um ref em vez de chamar findDOMNode(this) ?

eu também

+1

+1

+1

Desejo que os desenvolvedores sigam as convenções e evitem colocar o +1 para incomodar todos que se inscreveram neste tópico por e-mail. Isso é muito chato e pouco profissional, @kreuzhofer @Lemii @moderndegree @TechieQian @lefterisk e outros

Mesmo problema aqui ao usar o menu de design do Ant

mesmo problema aqui. preciso de uma correção o mais rápido possível

O mesmo problema aqui ao usar o botão de design Ant

+1

Mesmo problema aqui.

Mesmo problema aqui, realmente adoraria uma solução ou alternativa que não requeira desligar o modo estrito.

Estou enfrentando o mesmo problema

Mesmo problema aqui

mesmo problema com o submenu

@ Equipe da

Obrigado por tudo o que você faz! :)

Acabei de instalar o antd no meu projeto React TypeScript e assim que usei um botão, o erro foi acionado. É triste descobrir que não há solução para isso:

O mesmo aqui para o botão ant.design.
"antd": "^ 4.6.3",
"react": "^ 16.13.1",
"react-dom": "^ 16.13.1",

Alguma atualização? Ou solução alternativa?

o mesmo problema

Um erro é relatado na primeira linha do código. . . Ainda não reparado. .

Acabei de descobrir esse problema ao usar um botão em meu projeto.
Estou em "antd": "^ 4.6.2"

mesmo problema aqui usando o Modal.
Estou recebendo 2 avisos:
`index.js: 1 Aviso: Usar UNSAFE_componentWillReceiveProps no modo estrito não é recomendado e pode indicar bugs em seu código. Consulte https://fb.me/react-unsafe-component-lifecycles para obter detalhes.

• Mova o código de busca de dados ou efeitos colaterais para componentDidUpdate.
• Se você estiver atualizando o estado sempre que os props mudarem, refatore seu código para usar técnicas de memoização ou mova-o para getDerivedStateFromProps estático.

assim 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.

alguma atualização?

O mesmo problema.

Isso precisa ser consertado.

Problema aqui também em 4.6.6 ao usar um botão

As verificações de modo estrito são executadas apenas no modo de desenvolvimento; eles não afetam a construção da produção. Portanto, a mensagem pode ser irritante ...
Claro, comentar não é uma boa resposta, mas se não funcionar para você oferece uma correção?

O mesmo problema com a formiga 4.6.6 e reage 16.13.1 :(

Pessoal, só uma sugestão caso esse erro incomode vocês:

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

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

Felicidades!

@rafaelcalhau
É basicamente o mesmo que remover StrictMode, já que só realiza validações no ambiente de desenvolvimento. Então, você acabou de desabilitar todas as verificações de seu próprio código, que é exatamente para o que StrictMode foi feito.

o mesmo problema.

O mesmo problema.

O mesmo problema

@ enoh-barbu Não acho que alguém esteja ativamente tentando consertar isso.

Por mais que eu odeie ver um erro ao abrir o console, remover o modo estrito por causa desse erro é ridículo para dizer o mínimo.

Acima

Que tal se não tivermos nenhuma solução?

antes)

depois de)

mesmo problema até agora.

mesmo problema até agora.

mesmo problema até agora

mesmo problema ainda.

Ainda quebrado

Que tal se não tivermos nenhuma solução?

antes)
(imagem grande)

depois de)
(imagem grande)

Melhor ainda: se você fechar o console, todos os avisos desaparecerão 😄

Piadas à parte: enfrentar esse problema também em vários componentes

ainda o mesmo problema
ajuda a se livrar de React.StrictMode

Pergunta para qualquer um que segue o tópico ... o que isso significa (o erro especificamente) e alguém olhou o código para ver o que pode estar causando isso (ou por que é importante). Sinceramente, eu tentaria consertá-lo, mas não tenho tempo (ou o conhecimento da base de código) para investigar e ver por que isso está acontecendo ou onde o erro existe na base do código.

editar: claramente devo acrescentar que também experimentei o erro (embora não o tivesse há vários dias, então estou me perguntando quais são as circunstâncias específicas que acionam o erro, ou seja, em quais situações o método obsoleto findDOMNode está sendo chamou o botão?)

Talvez devêssemos começar a tratar este tópico como um esforço colaborativo e listar as situações em que experimentamos o aviso e começar a solucionar o problema, em vez de simplesmente afirmar "sim, ocorreu um erro, corrija".

@shawnpetros
Não sou um especialista em base de código, mas uso-o com freqüência suficiente para encontrar o problema não apenas no elemento de botão. Gastei um pouco de tempo investigando e descobri que o principal uso de findDomNode ocorre no componente de onda. O que é onda? Pelo que pude reunir uma ferramenta para animar coisas, como os componentes do botão entre outros.

• Se você estiver curioso, o criminoso aparece aqui: https://github.com/ant-design/ant-design/search?q=findDomNode
• e pode ser visto em ação aqui: https://github.com/ant-design/ant-design/blob/820aa04a96d6b1ced9697bb9293a293dfb676364/components/button/button.tsx#L295

Além de desabilitar o modo estrito (que é o que eu recorri até que uma correção mais apropriada esteja disponível, ou eu tenha tempo para aprender mais sobre o wave para propor um ...), pela aparência do código pode ser mais fácil de adicionar um PR para usar adereços para desativar o uso da onda, do que substituir totalmente o uso de findDomNode por enquanto. Um pouco de pesquisa no Google revelará que não é apenas um problema de design de formiga (por exemplo: https://stackoverflow.com/questions/61220424/material-ui-drawer-finddomnode-is-deprecated-in-strictmode), então eu presumo não é a solução mais fácil de implementar, ou então alguém já teria entrado em ação. Uma vez que qualquer alteração afetaria não apenas o botão, talvez tenhamos que esperar até que os criadores do ant-design tenham tempo para priorizar isso mais para que eles possam testar completamente uma solução adequada ... Eu certamente aprecio todo o trabalho que fizeram para faça o download aqui, então tenho certeza de que qualquer solução será algo que funcionará tão bem quanto o resto!

editar:
para qualquer um curioso por que isso pode não ser uma "solução fácil", aqui estão algumas soluções sugeridas para eliminar o findDomNode. https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660
presumindo que afete vários componentes, esta seria de fato uma tarefa maior do que qualquer um tem tempo "livre" para ...

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

O mesmo problema

Este bilhete está aberto há mais de 7 meses.

Mesmo

27755 há uma solicitação pull para corrigir esse problema

+1

Eu não sei sobre as regras neste projeto, mas em outras comunidades, o spam de comentários "mesmo" e "+1" é desencorajado porque

• se algo é um problema urgente, os desenvolvedores geralmente estão cientes disso,
• não acrescenta nada substancial para resolver o problema,
• leva tempo para os desenvolvedores analisarem suas notificações,
• tira tempo de outros observadores, que também têm muito spam em suas notificações.

Talvez possamos simplesmente expressar apoio a esse problema usando: +1: no problema principal.

Corrigido em https://github.com/ant-design/ant-design/pull/27755

Obrigado por trabalhar na correção, eu amo a biblioteca. Infelizmente, ainda estou vendo esse aviso com [email protected].
Só aparece depois que o validador assíncrono dispara ao usar uma entrada dentro de um formulário.

Eu tive o mesmo problema com [email protected]