https://github.com/latobibor/antd-tryout/commit/e373cb5038d88bf73358a05c8b37e0369dbaf478
Aucun avertissement ne doit être affiché.
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
retirer le
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
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
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 La ligne en question semble être la<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 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
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!
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
.
Un correctif serait incroyable! Merci à l'équipe antd!
même problème
alors des solutions?
Un de plus
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:
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é:
Balise https://github.com/ant-design/ant-design/blob/e1299bfcc97a97078c51f33ae939d815e4eacf7f/components/tag/index.tsx#L114 -L127
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>
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.
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)
après)
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
+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"
Peut-être pouvons-nous simplement exprimer notre soutien pour ce problème en utilisant: +1: sur le problème principal.
Corrigé dans https://github.com/ant-design/ant-design/pull/27755
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.
J'ai eu le même problème avec [email protected]
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é.