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