Ant-design: <button>在“ findDOMNode在StrictMode中已弃用”警告中</button>使用

创建于 2020-03-22 · 126评论 · 资料来源: ant-design/ant-design

[x]我已经搜索了该存储库的问题，并认为这不是重复的*（其他人报告了该

复制链接

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

重现步骤

安装依赖项（NPM I）
运行应用程序（npm启动）
检查控制台

期望什么？

不应显示任何警告。

实际发生了什么？

警告消息将出现在console.log中，指出“警告：StrictMode中已弃用findDOMNode。findDOMNode传递了StrictMode内部的Wave实例。相反，将ref直接添加到要引用的元素中。了解有关使用refs的更多信息安全地在这里：”

| 环境| 信息|
| --- | --- |
| 蚂蚁 4.0.3 |
| 反应| 16.13.1 |
| 系统| Windows 8.1 |
| 浏览器 Chrome 80 |

问题的根源来自<Button />组件。

查看相关文件：
https://github.com/latobibor/antd-tryout/commit/e373cb5038d88bf73358a05c8b37e0369dbaf478#diff -b525f6f7c3584f9af17112d37dae3a42

help wanted

资料来源

latobibor

👍165 ❤7 😕7 👀3

最有用的评论

仅仅为了一个按钮而删除严格模式是荒谬的。这是antd的合法问题，需要解决。

myou 于 2020-03-28

👍169 ❤2 🎉2

所有126条评论

退休方法ReactDOM.render（）中的标签正常工作

firesoftdev 于 2020-03-23

👎103 😕9 👍7 😄5 🚀3 ❤2 🎉1

我在严格模式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

saostad 于 2020-03-27

👍9

是否有关于相同或任何建议的解决方案，也将不胜感激。

ana-rajat 于 2020-03-28

仅仅为了一个按钮而删除严格模式是荒谬的。这是antd的合法问题，需要解决。

myou 于 2020-03-28

👍169 ❤2 🎉2

我遇到了同样的错误

duongle26 于 2020-03-31

😄1

需要做很多迁移，例如＃9870

yoyo837 于 2020-03-31

👍2 👎1

使用指南https://ant.design/docs/react/use-in-typescript进行全新安装后，此处的操作相同

DavidSolerMarco 于 2020-04-02

👍14

我也有同样的问题

描述

警告：findDOMNode在StrictMode中已弃用。 findDOMNode传递了StrictMode内部的Wave实例。而是直接将引用添加到要引用的元素。在此处了解有关安全使用裁判的更多信息： https :

解决

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

yayxs 于 2020-04-04

👎123 👍19 😄13 👀4 🚀2

我有同样的问题。你能修好吗？

marianelaleoncini 于 2020-04-10

👎3

我有同样的问题。你能修好吗？

Sikae 于 2020-04-12

👎2

我有同样的问题，但是我正在使用其他组件，所以问题不只是<Button /> 。

javiermoli 于 2020-04-13

👍4 👎1

我也有同样的问题。我正在使用

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

有问题的线似乎是线。

harbhub 于 2020-04-13

👎1

禁用严格模式并不是真正的选择。我们该如何解决？

phifa 于 2020-04-14

👍36 🎉2 👎1

禁用严格模式并不是真正的选择。我们该如何解决？

为此贡献代码。

yoyo837 于 2020-04-14

👍3 👎1

我在SubMenu和Select组件中也遇到了这个问题。

ngosang 于 2020-04-14

👍10 👎1

警告：已在严格模式树中检测到旧版上下文API。
所有16.x版本都将支持旧API，但是使用旧API的应用程序应迁移到新版本。
请更新以下组件：SubMenu

我得到了同样的警告

Even-Lau 于 2020-04-15

👎2 👍1

同一期

JaonMicle 于 2020-04-20

👍8 👎2

同样的问题:(

nehvaleem 于 2020-04-23

👎2

在这里再与残疾人一起工作，但真的希望这不是一个长期的解决方案。

anesask 于 2020-04-23

👍2

同一期

hz2 于 2020-04-24

👎3

这里同样的问题。

jjaijg 于 2020-04-24

👎3

同样的问题，蚂蚁团队已经有了解决方案吗？

arpesam 于 2020-04-24

👎2 👍1

菜单还会产生此警告：
<Menu mode="horizontal" >
如果删除水平模式，警告会消失。但这不是解决方案。

我想重构这可能是一件大事。可能需要挖掘多个组件。

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"

Invertisment 于 2020-04-26

👍5

同样的问题，帮助！！！请。

Reyloso 于 2020-04-27

👎1

Hello @latobibor. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @latobibor, 我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

giphy

ant-design-bot 于 2020-04-27

👍3 👀1

同一期

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)

Bac3Phi 于 2020-04-27

👎1

相同的问题，我刚刚遵循了type-type脚本文档，并提供了一个简单的演示，如下所示：

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

但是在控制台中出现此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错误。

怎么修？

hylerrix 于 2020-04-28

👎1

我认为我们应该关闭React.StrictMode并等到蚂蚁设计团队解决此问题并更新程序包。

artshakhov 于 2020-04-28

👎7 😕6 👀2

同样的问题

在这里再与残疾人一起工作，但真的希望这不是一个长期的解决方案。

究竟

ingenieriacreativads3 于 2020-04-30

👍3

最新版本（antd 4.2.0）中的同一问题

Somnus007 于 2020-04-30

👀1

同一期
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

Jinyang79 于 2020-04-30

👎1

ggmartins 于 2020-05-03

👎1

这里同样的问题
。
修复将是惊人的！谢谢antd团队！

YodaSpock 于 2020-05-04

👎1

同一期

ChenYCL 于 2020-05-04

👎1

那么有什么解决方案吗？

abellee 于 2020-05-05

👍2 👎1

加一

caelinsutch 于 2020-05-06

👎1

同样的问题。

baojie223 于 2020-05-06

👎1

也有此问题，请修复！

JuraJuki 于 2020-05-07

👎1

还看到了Button的这个问题。

CunningDJ 于 2020-05-09

👎1

请修正

jaddoescad 于 2020-05-10

👎1

在这里面对同样的问题

charan-r 于 2020-05-11

👎1

我有同样的问题。有人在处理这个问题吗？

RisingGeek 于 2020-05-12

👎1

您确定与antd有关吗？我切换到antd 3，但仍然遇到相同的问题

MagicCodeRoom 于 2020-05-12

👎1

是的，因为我正在使用该

RisingGeek 于 2020-05-12

👎1

同样在这里。似乎是非常紧迫的问题。蚂蚁D在哪里？

tayrotayro 于 2020-05-12

👎1

目前有没有从事公关工作的人？我可能会开始写一个

caelinsutch 于 2020-05-13

👎1

@caelinsutch据我所知，没有人。

yoyo837 于 2020-05-13

由于使用findDOMNode，主要问题是在wave.tsx文件中。存在一些迁移文章，例如这一本或本本

caelinsutch 于 2020-05-13

使用以下方法解决了问题：
受到官方示例的启发： https ：

我认为您的问题无法解决我的问题： https :

Invertisment 于 2020-05-13

@CathyXian包装表单中的所有按钮并不能解决问题，因为大多数情况下，表单中不使用<Button>组件，而是将onClick事件与它们关联。

Sicria 于 2020-05-13

正如@caelinsutch指出的那样，Wave组件正在使用不建议使用的方法findDOMNode。

快速检查哪些组件使用该方法，我发现：

按钮https://github.com/ant-design/ant-design/blob/dff19af744cce8920f8038f3d32a3051cae7ef50/components/button/button.tsx#L265 -L269
如果使用（type =“ link”），它将不使用Wave组件，这就是@CathyXian 。

波形分量应重构以删除旧方法。
并且，也许其他组件也应该摆脱该方法： https :

marceloadsj 于 2020-05-13

👍13

由于某种奇怪的原因，它不会与以下内容一起复制：

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

cybalex 于 2020-05-15

👎1

由于某种奇怪的原因，它不会与以下内容一起复制：
  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

我尝试了一下，像个魅力一样工作，但问题是，这是长期解决方案吗？

ahtashamabbasse 于 2020-05-16

由于某种奇怪的原因，它不会与以下内容一起复制：
  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

这与删除包裹在<React.StrictMode>周围的<App> <React.StrictMode>没什么不同。这不是必须的。

heofs 于 2020-05-17

👍1

Tabs组件也发生了

monochrome-yeh 于 2020-05-18

同样在这里，
您能优先考虑一下吗？

HDaghash 于 2020-05-18

👎1

相同的问题

danielcifuentes54 于 2020-05-18

👎1

我在这里遇到同样的问题，有人找到解决方案了吗？

Spinkers 于 2020-05-20

我在这里遇到同样的问题，有人找到解决方案了吗？

我的意思是，有一个如上所述的解决方案，可以重构代码，本周晚些时候我可能会解决它

caelinsutch 于 2020-05-20

🎉10

谢谢！我也遇到同样的问题！

lxu213 于 2020-05-21

👎1

同一期

baxibaba 于 2020-05-27

👎1 👍1

同样的问题

xXAvoraXx 于 2020-05-27

👎1

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

我使用htmlType属性仍然遇到此问题。删除StrictMode不是解决方案。 @antd请提供解决方案。

SrabaniBasak 于 2020-05-28

同一期

yangfei4913438 于 2020-06-03

👎2

任何解决方案，同样的问题....

EhssanAtassi 于 2020-06-03

👎2

使用SubMenu时出现同样的问题。
“ react”：“ ^ 16.13.1”，
“ react-dom”：“ ^ 16.13.1”，
“ antd”：“ ^ 4.3.1”，

zerone2 于 2020-06-04

我在form.item中使用按钮时遇到的同样问题

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

“ antd”：“ ^ 4.3.1”，

jayr211988 于 2020-06-04

您为什么不对此问题进行全面调查？ @ afc163

jiankafei 于 2020-06-05

同样的问题，有解决方案吗？

jalejocs 于 2020-06-05

👎2 👍1

垂直菜单中的子菜单也存在同样的问题，

radekxrandom 于 2020-06-06

👎2 👍1

这里同样的问题。它来自Button组件，但我认为它实际上位于componentDidMount和onTransitionStart的Wave组件中。我们可以使用ref而不是调用findDOMNode(this)吗？

kylios 于 2020-06-08

我也是

djlxiaoshi 于 2020-06-08

👎4 👍1

TechieQian 于 2020-06-08

👎3

moderndegree 于 2020-06-09

👎3

Lemii 于 2020-06-09

👎3

我希望开发人员遵循约定，避免通过+1来烦扰通过电子邮件订阅此线程的每个人。这非常烦人和不专业， @ kreuzhofer @Lemii @moderndegree @TechieQian @lefterisk等

DenysVuika 于 2020-06-09

👍17 ❤8

使用“蚂蚁设计”菜单时出现同样的问题

ymsstudios 于 2020-06-09

👎5 👍1

同样的问题。需要尽快修复

imransilvake 于 2020-06-11

👎4

使用“蚂蚁设计”按钮时出现同样的问题

zhaoxiangyan 于 2020-06-12

👎4

xXAvoraXx 于 2020-06-13

👎5

这里同样的问题。

Frixoe 于 2020-06-13

👎4

同样的问题，我真的很喜欢不需要关闭严格模式的解决方案或解决方法。

marzukia 于 2020-06-14

👎4 👍1

我面临着同样的问题

hoangfuongduy 于 2020-06-15

👎2 👍1

这里同样的问题

Hew007 于 2020-06-16

👎2 👍1

与子菜单相同的问题

ojha007 于 2020-06-16

👎2 👍1

@Ant团队，我建议保持打开状态，但锁定并

谢谢你所做的事！ :)

awarmfastbear 于 2020-06-18

👍12

我刚刚在我的React TypeScript项目中安装了antd，一旦使用按钮，就会引发错误。悲哀地发现了有没有解决这个：L

Gilbert1391 于 2020-09-10

👍2

此处与ant.design按钮相同。
“ antd”：“ ^ 4.6.3”，
“ react”：“ ^ 16.13.1”，
“ react-dom”：“ ^ 16.13.1”，

ugur-bayrakdar 于 2020-09-12

任何更新？还是解决方法？

KovalevAnton 于 2020-09-15

同一期

luoruihuan 于 2020-09-17

第一行代码就报错。。。还不修复。。

nshen 于 2020-09-17

我在项目中使用Button时才发现此问题。
我在“ antd”上：“ ^ 4.6.2”

stefanborghys 于 2020-09-19

同样的问题在这里使用模态。
我收到2条警告：
`index.js：1警告：不建议在严格模式下使用UNSAFE_componentWillReceiveProps，这可能表示代码中存在错误。有关详细信息，请参见https://fb.me/react-unsafe-component-lifecycles 。

将获取数据的代码或副作用移动到componentDidUpdate。
如果每当道具更改时都在更新状态，请重构代码以使用备注技术或将其移至静态getDerivedStateFromProps。

以及：
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.

fuston05 于 2020-09-21

👍9

任何更新？

rudiarta 于 2020-09-27

👍5

同样的问题。

romadryud 于 2020-09-29

这需要解决。

mameaw14 于 2020-09-30

👍8

使用按钮时，也请在4.6.6上发布

artem-alek 于 2020-09-30

👍3

严格模式检查仅在开发模式下运行；它们不会影响生产。所以消息可能会令人讨厌...
当然，将其注释掉不是一个很好的答案，但是如果它不能解决问题，那么您可以提供解决方案吗？

DavidWhit 于 2020-10-01

👍1

蚂蚁4.6.6和反应16.13.1相同的问题:(

Dooxe59 于 2020-10-02

伙计们，只是一个建议，以防这个错误让您烦恼：

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

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

干杯!

rafaelcalhau 于 2020-10-04

😄10 👎6

@rafaelcalhau
它基本上与删除StrictMode相同，因为它仅在开发环境中执行验证。因此，您只对自己的代码禁用了所有检查，这正是StrictMode所做的。

ocassio 于 2020-10-04

👍11

同样的问题。

jamesearlywine 于 2020-10-05

同样的问题。

wenmingtang 于 2020-10-06

同一期

miguebaci 于 2020-10-08

@ enoh-barbu我认为没有人在积极尝试解决此问题。

尽管我不喜欢在打开控制台时看到错误，但至少可以说，为避免此错误而删除严格模式是很荒谬的。

rapidsols 于 2020-10-10

👍2 😕1

向上

JtawRobot 于 2020-10-20

如果我们没有任何解决方案呢？

之前）

后）

keating529 于 2020-10-21

😄6

直到现在都是同样的问题。

tanex143 于 2020-10-22

直到现在都是同样的问题。

lesliechueng1996 于 2020-10-22

直到现在都一样

acors 于 2020-10-23

同样的问题。

nabekabebe 于 2020-10-25

还是坏了

kaaboaye 于 2020-10-26

如果我们没有任何解决方案呢？
之前）
（大图）
后）
（大图）

更好的是：如果关闭控制台，所有警告都会消失😄

除了笑话：在多个组件上也都面临这个问题

novxa 于 2020-10-26

还是一样的问题
帮助摆脱React.StrictMode

michaeldaineka 于 2020-10-27

向跟随线程的任何人提问...什至是MEAN（具体是错误）在做什么，并让任何人查看代码以查看可能导致它的原因（或为什么如此重要）。老实说，我会尝试修复它，但是我没有时间（或没有代码库的知识）去研究为什么会发生这种情况，或者代码中错误存在的地方。

编辑：显然，我应该补充一点，我也同样会经历该错误（尽管几天前我没有遇到该错误，所以我想知道是什么特定情况触发了该错误，即在哪种情况下，不赞成使用的方法findDOMNode被在按钮上调用？）

也许我们应该开始将此线程视为一种协作工作，并列出遇到警告并开始进行故障排除的情况，而不是简单地声明“是的，有错误，请解决”。

shawnpetros 于 2020-10-27

👍1

@shawnpetros
我不是代码库方面的专家，但是经常使用它，不仅在button元素上遇到了问题。花了一些时间进行调查，并了解到findDomNode的主要用途发生在wave组件中。什么是波？通过我可以收集的工具来制作事物的动画，例如按钮组件。

如果您好奇，违规者会显示在这里： https :
并可以在此处查看操作： https :

除了禁用严格模式（这是我依靠的，直到获得更合适的修复程序为止，或者我有时间学习更多关于wave提出自己的建议...），从代码的外观看，添加起来可能更容易PR使用道具来禁用wave使用，而不是现在完全替换findDomNode使用。稍作搜索就会发现这不仅是一个蚂蚁设计问题（即：https://stackoverflow.com/questions/61220424/material-ui-drawer-finddomnode-is-deprecated-in-strictmode），所以我假设并非最容易实施的修复程序，否则有人可能已经对此进行了修订。由于任何更改不仅会影响按钮，因此我们可能只需要等到蚂蚁设计创建者有时间优先处理此问题，以便他们可以彻底测试合适的解决方案...。我当然感谢他们为所做的所有工作拿到这里，所以我确信无论解决方案将是什么都将和其余的一样好！

编辑：
对于任何好奇为什么这可能不是“轻松解决”的人，这里有一些建议的解决方案，用于放弃findDomNode。 https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660
假设它影响到多个组件，那么这的确是一项艰巨的任务，比任何人都有“空闲”时间来...