Ant-design: Utilisation des <button>résultats dans l'avertissement "findDOMNode est obsolète dans StrictMode"</button>

Cr√©√© le 22 mars 2020  ¬∑  126Commentaires  ¬∑  Source: ant-design/ant-design

  • [x] J'ai recherch√© les probl√®mes de ce r√©f√©rentiel et je pense qu'il ne s'agit pas d'un doublon * (il a √©t√© signal√© par quelqu'un d'autre mais pas via Issue Creator et il a √©t√© automatiquement ferm√©).

Lien de reproduction

https://github.com/latobibor/antd-tryout/commit/e373cb5038d88bf73358a05c8b37e0369dbaf478

√Čtapes √† suivre pour reproduire

  1. installer les dépendances (npm i)
  2. exécuter l'application (npm start)
  3. vérifier la console

Qu'attend-on?

Aucun avertissement ne doit être affiché.

Que se passe-t-il réellement?

Un message d'avertissement appara√ģtra dans console.log indiquant "Avertissement: findDOMNode est obsol√®te dans StrictMode. FindDOMNode a re√ßu une instance de Wave qui se trouve √† l'int√©rieur de StrictMode. Ajoutez plut√īt une r√©f√©rence directement √† l'√©l√©ment que vous souhaitez r√©f√©rencer. En savoir plus sur l'utilisation des r√©f√©rences ici en toute s√©curit√©: "

| Environnement | Info |
| --- | --- |
| antd | 4.0.3 |
| React | 16.13.1 |
| Système | Windows 8.1 |
| Navigateur | Chrome 80 |


La source du problème vient du composant <Button /> .

Voir le fichier en question:
https://github.com/latobibor/antd-tryout/commit/e373cb5038d88bf73358a05c8b37e0369dbaf478#diff -b525f6f7c3584f9af17112d37dae3a42

help wanted

Commentaire le plus utile

Supprimer le mode strict juste pour le plaisir d'un bouton est ridicule. C'est un problème légitime avec antd qui doit être corrigé.

Tous les 126 commentaires

retirer lebalise dans la méthode ReactDOM.render () fonctionne normalement

J'obtiens la même erreur en mode strict 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

Y a-t-il une solution concernant la même chose ou des suggestions seraient également appréciées.

Supprimer le mode strict juste pour le plaisir d'un bouton est ridicule. C'est un problème légitime avec antd qui doit être corrigé.

Je reçois la même erreur

Besoin de faire beaucoup de migration, comme # 9870

La même chose ici après une nouvelle installation en utilisant le guide https://ant.design/docs/react/use-in-typescript

J'ai le même problème

desc

Attention: findDOMNode est obsolète dans StrictMode. findDOMNode a reçu une instance de Wave qui se trouve à l'intérieur de StrictMode. Au lieu de cela, ajoutez une référence directement à l'élément que vous souhaitez référencer. En savoir plus sur l'utilisation des refs en toute sécurité ici: https://fb.me/react-strict-mode-find-node

résoudre

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

J'ai le m√™me probl√®me. Pouvez-vous le r√©parer, s'il vous pla√ģt?

J'ai le m√™me probl√®me. Pouvez-vous le r√©parer, s'il vous pla√ģt?

J'ai le même problème, mais j'utilise d'autres composants, donc le problème n'est pas seulement le <Button /> .

J'ai le même problème. j'utilise

<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 ligne en question semble être la ligne.

la désactivation du mode strict n'est pas vraiment une option. Comment pouvons-nous régler ceci?

la désactivation du mode strict n'est pas vraiment une option. Comment pouvons-nous régler ceci?

Contribuez au code de migration à ce sujet.

J'ai ce problème dans le sous-menu et sélectionnez les composants aussi.

Avertissement: l'ancienne API de contexte a été détectée dans une arborescence en mode strict.
L'ancienne API sera prise en charge dans toutes les versions 16.x, mais les applications qui l'utilisent doivent migrer vers la nouvelle version.
Veuillez mettre à jour les composants suivants: Sous-menu

J'ai le même avertissement

Même problème

Même problème également :(

Un de plus ici, travaillant avec des personnes handicapées, mais j'espère vraiment que ce n'est pas une solution à long terme.

Même problème

Même problème ici.

Même problème ici, l'équipe Ant a-t-elle déjà une solution?

Menu produit également cet avertissement:
<Menu mode="horizontal" >
Si je supprime le mode horizontal, l'avertissement dispara√ģt. Mais ce n'est pas une solution.

Je suppose que cela pourrait être une grande chose de refactoriser cela. Il peut être nécessaire de creuser dans plusieurs composants.

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"

M√™me probl√®me, aide !!! S'il vous pla√ģt.

Bonjour @latobibor. Nous appr√©cions totalement votre proposition / vos commentaires, n'h√©sitez pas √† nous envoyer une Pull Request pour cela. Veuillez envoyer votre Pull Request √† la branche appropri√©e (branche de fonctionnalit√© pour la nouvelle fonctionnalit√©, master pour la correction de bogues et autres changements), remplissez la Pull Request Mod√®le ici, fournissez le journal des modifications / TypeScript / documentation / cas de test si n√©cessaire et assurez-vous que CI a r√©ussi, nous le r√©viserons bient√īt.

Bonjour @latobibor, nous sommes enti√®rement d'accord avec votre suggestion / commentaire, n'h√©sitez pas dans cet entrep√īt pour cr√©er une Pull Request pour r√©soudre ce probl√®me. Veuillez envoyer la demande de tirage √† la branche appropri√©e (nouvelles fonctionnalit√©s dans la branche de fonctionnalit√©, autres dans la branche principale), assurez-vous de remplir le mod√®le pr√©d√©fini dans la demande de tirage et fournissez le journal des modifications correspondant, les d√©finitions TypeScript, les cas de test, les documents, etc. requis pour les modifications. , Et pour nous assurer que CI est pass√©, nous examinerons d√®s que possible, merci d'avance et nous nous r√©jouissons de votre contribution!

giphy

Même problème

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)

Le même problème, je viens de suivre la doc use-in-typograph , avec une simple démo comme celle-ci:

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

Mais j'ai cette erreur 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 dans la console.

Comment réparer?

Je pense que nous devrions désactiver React.StrictMode et attendre que l'équipe de conception de fourmi corrige ce problème et met à jour le package.

même problème ici, et

Un de plus ici, travaillant avec des personnes handicapées, mais j'espère vraiment que ce n'est pas une solution à long terme.

exactement

même problème dans la dernière version (antd 4.2.0)

Même problème
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

Même problème ici
image .
Un correctif serait incroyable! Merci à l'équipe antd!

même problème
image

alors des solutions?

Un de plus

image
Même problème.

Si vous rencontrez également ce problème, veuillez le corriger!

Voir également ce problème avec Button.

S'il-vous-pla√ģt, r√©parez

Face au même problème ici

J'ai le même problème. Quelqu'un travaille-t-il sur ce problème?

√ätes-vous s√Ľr que cela a quelque chose √† voir avec antd? Je suis pass√© √† antd 3. et j'ai toujours le m√™me probl√®me

Oui, car j'utilise le

pareil ici. Cela semble √™tre un probl√®me urgent. Ant D o√Ļ es-tu?

Y a-t-il quelqu'un qui travaille actuellement sur un PR? Je peux commencer à en écrire un

@caelinsutch Autant que je sache, personne.

Le problème principal est dans le fichier wave.tsx en raison de l'utilisation de findDOMNode. Plusieurs articles sur la migration existent, comme celui-ci ou celui-ci

Problème résolu en utilisant:
Screen Shot 2020-05-12 at 10 30 01 PM

Inspiré de l'exemple officiel: https://ant.design/components/form-cn/

Je ne pense pas que votre exemple résout mon cas: https://github.com/ant-design/ant-design/issues/22493#issuecomment -619562638. Et on ne sait pas du tout ce que vous avez fait. Si vous avez fait quelque chose.

@CathyXian L' emballage de tous les boutons dans un formulaire ne résout pas le problème car la plupart du temps, les composants <Button> ne sont pas utilisés dans les formulaires mais ont à la place des événements onClick sont associés.

Comme @caelinsutch l'a souligné, le composant Wave utilise la méthode obsolète findDOMNode.

En vérifiant rapidement quels composants utilisent cette méthode, j'ai trouvé:

La composante d'onde doit être refactorisée pour supprimer l'ancienne méthode.
Et, peut-être que d'autres composants devraient également se débarrasser de cette méthode: https://github.com/ant-design/ant-design/search?q=findDOMNode&unscoped_q=findDOMNode

pour une raison étrange, il ne se reproduit pas avec ce qui suit:

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

pour une raison étrange, il ne se reproduit pas avec ce qui suit:

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

J'ai essayé cela et je travaille comme un charme, mais cette question est: est-ce des solutions à long terme?

pour une raison étrange, il ne se reproduit pas avec ce qui suit:

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

Ce n'est pas différent de simplement supprimer le <React.StrictMode> enveloppé autour de <App> . Ce qui ne devrait pas être nécessaire.

√Čgalement arriv√© avec le composant Tabs

Pareil ici,
pourriez-vous s'il vous pla√ģt lui donner une priorit√© plus √©lev√©e?

m√™me probl√®me ūüėď

J'ai le même problème ici, quelqu'un a-t-il trouvé une solution?

J'ai le même problème ici, quelqu'un a-t-il trouvé une solution?

Je veux dire qu'il existe une solution comme indiqué ci-dessus, refactoriser le code, je vais probablement y revenir plus tard cette semaine

Je vous remercie! J'ai aussi le même problème!

même problème

même problème

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

J'ai utilisé l'attribut htmlType toujours ce problème. La suppression de StrictMode n'est pas une solution. @antd veuillez fournir la solution.

même problème

Toute solution, même problème ...

même problème lors de l'utilisation du sous-menu.
"réagir": "^ 16.13.1",
"react-dom": "^ 16.13.1",
"antd": "^ 4.3.1",

Même problème que j'utilise le bouton dans le formulaire.


<Button type="primary" htmlType="submit" > LOG IN </Button>

"antd": "^ 4.3.1",

Pourquoi ne faites-vous pas une enquête globale sur ce problème? @ afc163

Même problème, une solution?

Même problème avec un sous-menu dans le menu vertical,

Même problème ici. Il sort du composant Button , mais je pense que c'est en fait dans le composant Wave , dans componentDidMount et onTransitionStart . Pouvons-nous simplement utiliser une référence au lieu d'appeler findDOMNode(this) ?

moi aussi

+1

+1

+1

Je souhaite que les développeurs suivent les conventions et évitent de mettre +1 pour harceler tous ceux qui se sont abonnés à ce fil par e-mail. C'est très ennuyeux et peu professionnel, @kreuzhofer @Lemii @moderndegree @TechieQian @lefterisk et autres

Même problème ici lors de l'utilisation du menu de conception de fourmis

même problème ici. besoin d'une solution dès que possible

Même problème ici lors de l'utilisation du bouton Ant Design

+1

Même problème ici.

Même problème ici, j'aimerais vraiment une solution ou une solution de contournement qui ne nécessite pas de désactiver le mode strict.

Je suis confronté au même problème

Même problème ici

même problème avec le sous-menu

@Ant √©quipe, je sugg√©rerais de laisser cela ouvert mais de verrouiller et de d√©sactiver le probl√®me. Ces +1 suppl√©mentaires et moi aussi ne fournissent absolument aucune valeur pour aider √† r√©soudre le probl√®me. Vous cr√©ez plut√īt du bruit et du spam pour ceux qui recherchent des mises √† jour notables. Si vous voulez aider, contribuez et r√©duisez les r√©visions de code.

Merci pour tout ce que vous faites! :)

Je viens d'installer antd dans mon projet React TypeScript et dès que j'ai utilisé un bouton, l'erreur s'est produite. Triste de découvrir qu'il n'y a pas de solution à cela: l

Idem ici pour le bouton ant.design.
"antd": "^ 4.6.3",
"réagir": "^ 16.13.1",
"react-dom": "^ 16.13.1",

Les mises à jour? Ou une solution de contournement?

même problème

Une erreur est signalée sur la première ligne de code. . . Pas encore réparé. .

Je viens de découvrir ce problème lors de l'utilisation d'un bouton dans mon projet.
Je suis sur "antd": "^ 4.6.2"

même problème ici en utilisant le Modal.
Je reçois 2 avertissements:
`index.js: 1 Attention: l'utilisation d'UNSAFE_componentWillReceiveProps en mode strict n'est pas recommandée et peut indiquer des bogues dans votre code. Voir https://fb.me/react-unsafe-component-lifecycles pour plus de détails.

  • D√©placez le code de r√©cup√©ration des donn√©es ou les effets secondaires vers componentDidUpdate.
  • Si vous mettez √† jour l'√©tat chaque fois que les accessoires changent, refactorisez votre code pour utiliser des techniques de m√©morisation ou d√©placez-le vers getDerivedStateFromProps statique.

aussi bien que :
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.

les mises à jour ?

Même problème.

Cela doit être corrigé.

Problème ici aussi sur 4.6.6 lors de l'utilisation d'un bouton

Les vérifications en mode strict sont exécutées en mode développement uniquement; ils n'ont pas d'impact sur la production. Le message peut donc devenir ennuyeux ...
Bien s√Ľr, le commenter n'est pas une bonne r√©ponse, mais si cela ne fonctionne pas, proposez-vous une solution?

Même problème avec ant 4.6.6 et react 16.13.1 :(

Les gars, juste une suggestion au cas o√Ļ cette erreur serait ennuyeuse pour vous:

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

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

À votre santé!

@rafaelcalhau
C'est fondamentalement la même chose que la suppression de StrictMode, car il n'effectue des validations que dans l'environnement de développement. Donc, vous venez de désactiver toutes les vérifications de votre propre code, ce qui est exactement ce à quoi StrictMode est fait.

même problème.

Même problème.

Même problème

@ enoh-barbu Je ne pense pas que quiconque essaie activement de résoudre ce problème.

Autant je déteste voir une erreur lorsque j'ouvre la console, autant supprimer le mode strict pour le plaisir de cette erreur est ridicule pour le moins.

Vers le haut

Et si on n’a pas de solution?

avant)
image

après)
image

même problème jusqu'à présent.

même problème jusqu'à présent.

même problème jusqu'à présent

même problème encore.

Encore cassé

Et si on n’a pas de solution?

avant)
(grande image)

après)
(grande image)

Mieux encore: si vous fermez la console, chaque avertissement est parti ūüėĄ

Blagues à part: affronter ce problème aussi sur plusieurs composants

toujours le même problème
aide à se débarrasser de React.StrictMode

Question √† tous ceux qui suivent le fil de discussion ... qu'est-ce que cela signifie m√™me (l'erreur en particulier), et quelqu'un a-t-il regard√© le code pour voir ce qui pourrait en √™tre la cause (ou pourquoi cela compte). Tr√®s honn√™tement, j'essaierais de le r√©parer, mais je n'ai pas le temps (ou la connaissance de la base de code) d'enqu√™ter et de voir pourquoi cela se produit ou o√Ļ dans la base de code l'erreur existe.

edit: clairement, je dois ajouter que je ressens également l'erreur (même si je ne l'ai pas eu il y a plusieurs jours, je me demande donc quelles sont les circonstances spécifiques qui déclenchent l'erreur, c'est-à-dire dans quelles situations la méthode obsolète findDOMNode est-elle appelé Button?)

Peut-√™tre devrions-nous commencer √† traiter ce fil de discussion comme un effort de collaboration et √† r√©pertorier les situations dans lesquelles nous rencontrons l'avertissement et commen√ßons √† r√©soudre les probl√®mes plut√īt que de simplement d√©clarer "oui, avez une erreur, veuillez corriger".

@shawnpetros
Je ne suis en aucun cas un expert de la base de code, mais je l'utilise suffisamment fréquemment pour avoir rencontré le problème, pas seulement sur l'élément bouton. J'ai passé un peu de temps à enquêter et j'ai appris que l'utilisation principale de findDomNode se produit dans le composant wave. Qu'est-ce que la vague? À partir de quoi je peux rassembler un outil pour animer des choses, telles que les composants de bouton, entre autres.

Mis √† part la d√©sactivation du mode strict (c'est ce √† quoi j'ai eu recours jusqu'√† ce qu'un correctif plus appropri√© soit disponible, ou que j'aie le temps d'en savoir plus sur wave pour en proposer un moi-m√™me ...), √† partir de l'apparence du code, il pourrait √™tre plus facile d'ajouter un PR d'utiliser des accessoires pour d√©sactiver l'utilisation de wave, plut√īt que de remplacer compl√®tement l'utilisation de findDomNode pour le moment. Un peu de googler r√©v√©lera qu'il ne s'agit pas simplement d'un probl√®me de conception de fourmis (c'est-√†-dire: https://stackoverflow.com/questions/61220424/material-ui-drawer-finddomnode-is-deprecated-in-strictmode), donc je suppose pas la solution la plus simple √† mettre en Ňďuvre, sinon quelqu'un aurait d√©j√† saut√© dessus. √Čtant donn√© que tout changement n'affecterait pas seulement le bouton, nous devrons peut-√™tre simplement attendre que les cr√©ateurs de la conception de fourmis aient le temps de donner la priorit√© √† cela afin de pouvoir tester en profondeur une solution appropri√©e ... J'appr√©cie certainement tout le travail qu'ils ont accompli pour obtenez-le ici, donc je suis s√Ľr que la solution sera quelque chose qui fonctionnera aussi bien que le reste!

√Čditer:
pour quiconque est curieux de savoir pourquoi ce n'est peut-être pas une "solution facile", voici quelques suggestions de solutions pour abandonner findDomNode. https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660
en supposant que cela affecte plusieurs composants, ce serait en effet une t√Ęche plus importante que quiconque a du temps "libre" pour ...

Même problème

Ce billet est ouvert depuis plus de 7 mois.

Même

27755 il y a une pull request pour résoudre ce problème

+1

Je ne connais pas les règles de ce projet, mais dans d’autres communautés, il est déconseillé de spammer les commentaires "identiques" et "+1"

  • si quelque chose est un probl√®me pressant, les d√©veloppeurs en sont g√©n√©ralement bien conscients,
  • cela n'ajoute rien de substantiel pour r√©soudre le probl√®me,
  • il faut du temps aux d√©veloppeurs pour parcourir leurs notifications,
  • cela prend du temps aux autres observateurs, qui ont √©galement beaucoup de spam dans leurs notifications.

Peut-être pouvons-nous simplement exprimer notre soutien pour ce problème en utilisant: +1: sur le problème principal.

Merci d'avoir travaill√© sur le correctif, j'adore la biblioth√®que. Malheureusement, je vois toujours cet avertissement avec [email protected].
Appara√ģt uniquement apr√®s le d√©clenchement du validateur asynchrone lors de l'utilisation d'une entr√©e dans un formulaire.

Screen Shot 2020-11-18 at 5 07 27 PM

J'ai eu le m√™me probl√®me avec [email protected]

Cette page vous a été utile?
0 / 5 - 0 notes