Ant-design: Использование <button>результатов в предупреждении «findDOMNode устарело в StrictMode»</button>

Созданный на 22 мар. 2020  ·  126Комментарии  ·  Источник: ant-design/ant-design

  • [x] Я изучил проблемы в этом репозитории и считаю, что это не дубликат * (об этом сообщил кто-то другой, но не через Issue Creator, и он был автоматически закрыт).

Ссылка для воспроизведения

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

Действия по воспроизведению

  1. установить зависимости (npm i)
  2. запустить приложение (запуск npm)
  3. проверить консоль

Что ожидается?

Предупреждения отображаться не должны.

Что на самом деле происходит?

В журнале console.log появится предупреждающее сообщение: «Предупреждение: findDOMNode устарел в StrictMode. FindDOMNode был передан экземпляр Wave, который находится внутри StrictMode. Вместо этого добавьте ссылку непосредственно на элемент, на который вы хотите ссылаться. Подробнее об использовании ссылок безопасно здесь: "

| Окружающая среда | Информация |
| --- | --- |
| antd | 4.0.3 |
| React | 16.13.1 |
| Система | Windows 8.1 |
| Браузер | Хром 80 |


Источник проблемы исходит из компонента <Button /> .

См. Рассматриваемый файл:
https://github.com/latobibor/antd-tryout/commit/e373cb5038d88bf73358a05c8b37e0369dbaf478#diff -b525f6f7c3584f9af17112d37dae3a42

help wanted

Самый полезный комментарий

Убирать строгий режим ради кнопки просто смешно. Это законная проблема с antd, которую необходимо исправить.

Все 126 Комментарий

вывод на пенсиютег в методе ReactDOM.render () работает нормально

Я получаю ту же ошибку в строгом режиме 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

Есть ли какое-либо решение относительно того же или какие-либо предложения также будут оценены.

Убирать строгий режим ради кнопки просто смешно. Это законная проблема с antd, которую необходимо исправить.

Я получаю ту же ошибку

Требуется много миграции, например # 9870

То же самое здесь после новой установки с использованием руководства https://ant.design/docs/react/use-in-typescript

у меня та же проблема

desc

Предупреждение: findDOMNode устарел в StrictMode. findDOMNode был передан экземпляр Wave, который находится внутри StrictMode. Вместо этого добавьте ссылку прямо к элементу, на который вы хотите сослаться. Узнайте больше о безопасном использовании ссылок здесь: https://fb.me/react-strict-mode-find-node

решить

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

У меня такая же проблема. Можешь починить, пожалуйста?

У меня такая же проблема. Можешь починить, пожалуйста?

У меня такая же проблема, но я использую другие компоненты, поэтому проблема не только в <Button /> .

У меня та же проблема. я использую

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

Рассматриваемая строка кажется линия.

отключение строгого режима на самом деле не вариант. Как мы можем это исправить?

отключение строгого режима на самом деле не вариант. Как мы можем это исправить?

Сообщите об этом в коде миграции.

У меня проблема с компонентами SubMenu и Select.

Предупреждение: устаревший контекстный API был обнаружен в дереве строгого режима.
Старый API будет поддерживаться во всех выпусках 16.x, но приложения, использующие его, должны перейти на новую версию.
Обновите следующие компоненты: SubMenu

Я получил такое же предупреждение

Та же проблема

Та же проблема :(

Еще один здесь, работа с инвалидами, но очень надеюсь, что это не долгосрочное решение.

Та же проблема

Здесь та же проблема.

Та же проблема, есть ли у команды Ant уже решение?

Меню также выдает это предупреждение:
<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"

Та же проблема, помогите !!! Пожалуйста.

Здравствуйте, @latobibor. Нам очень нравится ваше предложение / отзыв, добро пожаловать, чтобы отправить нам запрос на слияние. Отправьте запрос на слияние в соответствующую ветку (ветвь функции для новой функции, мастер для исправления ошибок и других изменений), заполните запрос на

Здравствуйте, @latobibor, мы полностью согласны с вашим предложением / создавать на этом складе вытягивание для решения этой проблемы. Отправьте запрос на слияние в правильную ветку (новые функции в ветку функций, другие в главную ветвь), обязательно заполните предустановленный шаблон в запросе слияния и предоставьте соответствующий журнал изменений, определения TypeScript, тестовые примеры, документы и т. Д., Необходимые для изменений , И чтобы убедиться, что CI пройден, мы рассмотрим как можно скорее, заранее благодарим вас и с нетерпением ждем вашего вклада!

giphy

Та же проблема

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)

Та же проблема, я только что проследил за документом use-in-typescript с простой демонстрацией, подобной этой:

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 в консоли.

Как исправить?

Я думаю, что нам следует отключить React.StrictMode и подождать, пока команда разработчиков Ant исправит эту проблему и обновит пакет.

такая же проблема здесь, и

Еще один здесь, работа с инвалидами, но очень надеюсь, что это не долгосрочное решение.

точно

такая же проблема в последней версии (antd 4.2.0)

Та же проблема
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

Та же проблема здесь
image .
Исправить было бы здорово! Спасибо команде antd!

та же проблема
image

так какие решения?

Плюс один

image
Та же проблема.

У вас тоже есть эта проблема, пожалуйста, исправьте!

Также вижу эту проблему с кнопкой.

Пожалуйста исправьте

Столкнувшись с той же проблемой здесь

У меня такая же проблема. Кто-то работает над этой проблемой?

Вы уверены, что это как-то связано с antd? Я перешел на antd 3. и проблема осталась прежней.

Да, потому что я использую

тоже самое. Вроде бы вопрос насущный. Муравей Д, где ты?

Кто-нибудь сейчас занимается пиаром? Я могу начать писать

@caelinsutch Насколько я знаю, никто.

Основная проблема заключается в файле wave.tsx из-за использования findDOMNode. Существует несколько статей о миграции, например эта или эта

Проблема решена с помощью:
Screen Shot 2020-05-12 at 10 30 01 PM

На основе официального примера: https://ant.design/components/form-cn/

Я не думаю, что ваш экзамен решит мой случай: https://github.com/ant-design/ant-design/issues/22493#issuecomment -619562638. А также вообще не известно, чем вы занимались. Если ты что-нибудь сделал.

@CathyXian Обертывание всех кнопок в форме не решает проблему, поскольку в большинстве случаев компоненты <Button> не используются в формах, а вместо этого имеют связанные с ними события onClick .

Как указал @caelinsutch , компонент Wave использует устаревший метод findDOMNode.

Быстро проверив, какие компоненты используют этот метод, я обнаружил:

Необходимо провести рефакторинг волновой составляющей, чтобы удалить старый метод.
И, возможно, другие компоненты также должны избавиться от этого метода: https://github.com/ant-design/ant-design/search?q=findDOMNode&unscoped_q=findDOMNode

по какой-то странной причине он не воспроизводится следующим образом:

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

по какой-то странной причине он не воспроизводится следующим образом:

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

Я пробовал это и работает как шарм, но вопрос в том, есть ли это долгосрочные решения?

по какой-то странной причине он не воспроизводится следующим образом:

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

Это ничем не отличается от простого удаления обернутого <React.StrictMode> вокруг <App> . В этом не должно быть необходимости.

Также произошло с компонентом вкладок

Тоже самое,
не могли бы вы дать ему более высокий приоритет?

та же проблема 😓

У меня здесь такая же проблема, кто-нибудь нашел решение?

У меня здесь такая же проблема, кто-нибудь нашел решение?

Я имею в виду, что есть решение, описанное выше, рефакторинг кода, я, вероятно, доберусь до него позже на этой неделе.

Спасибо! У меня такая же проблема!

та же проблема

та же проблема

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

Я использовал атрибут htmlType, все еще сталкиваясь с этой проблемой. Удаление StrictMode не является решением. @antd, пожалуйста, предоставьте решение.

та же проблема

Любое решение, та же проблема ....

та же проблема при использовании SubMenu.
"реагировать": "^ 16.13.1",
"react-dom": "^ 16.13.1",
"antd": "^ 4.3.1",

Та же проблема, что я использую кнопку в form.item


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

"antd": "^ 4.3.1",

Почему бы вам не провести полное расследование этой проблемы? @ afc163

Та же проблема, любое решение?

Та же проблема с подменю в вертикальном меню,

Здесь та же проблема. Он исходит из компонента Button , но я думаю, что на самом деле он находится в компоненте Wave , в componentDidMount и onTransitionStart . Можем ли мы просто использовать ref вместо вызова findDOMNode(this) ?

я тоже

+1

+1

+1

Я хочу, чтобы разработчики следовали соглашениям и не ставили +1, чтобы придираться ко всем, кто подписался на эту ветку по электронной почте. Это очень раздражает и непрофессионально, @kreuzhofer @Lemii @moderndegree @TechieQian @lefterisk и другие

Та же проблема здесь при использовании меню Ant Design

такая же проблема здесь. нужно исправить как можно скорее

Та же проблема здесь при использовании кнопки Ant Design

+1

Здесь та же проблема.

Такая же проблема здесь, очень хотелось бы найти решение или обходной путь, который не требует отключения строгого режима.

Я столкнулся с той же проблемой

Такая же проблема здесь

такая же проблема с подменю

Команда @Ant , я бы предложил оставить это открытым, но заблокировать и отключить проблему. Эти дополнительные +1 и я тоже не имеют никакого значения для решения проблемы. Вместо этого вы создаете шум и спам для тех, кто ищет заметные обновления. Если вы хотите помочь, вносите свой вклад и сокращайте обзоры кода.

Спасибо за все, что вы делаете! :)

Я только что установил antd в свой проект React TypeScript, и как только я нажал кнопку, возникла ошибка. К сожалению, решения этой проблемы нет: l

То же самое и с кнопкой ant.design.
"antd": "^ 4.6.3",
"реагировать": "^ 16.13.1",
"react-dom": "^ 16.13.1",

Любые обновления? Или обходной путь?

та же проблема

Об ошибке сообщается в первой строке кода. . . Еще не ремонтировали. .

Я только что обнаружил эту проблему при использовании кнопки в моем проекте.
Я нахожусь на "antd": "^ 4.6.2"

та же проблема здесь с использованием Modal.
Я получаю 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.

любые обновления ?

Та же проблема.

Это нужно исправить.

Проблема здесь также в 4.6.6 при использовании кнопки

Проверки в строгом режиме выполняются только в режиме разработки; они не влияют на производственную сборку. Так что сообщение может раздражать ...
Конечно, комментировать это не лучший ответ, но если это не сработает, вы предлагаете исправление?

Та же проблема с ant 4.6.6 и React 16.13.1 :(

Ребята, просто предложение на случай, если эта ошибка вас раздражает:

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

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

Ура!

@rafaelcalhau
Это в основном то же самое, что и удаление StrictMode, поскольку оно выполняет только проверки в среде разработки. Итак, вы просто отключили все проверки для своего кода, для чего и создан StrictMode.

та же проблема.

Та же проблема.

Та же проблема

@ enoh-barbu Я не думаю, что кто-то активно пытается это исправить.

Как бы я ни ненавидел видеть ошибку при открытии консоли, удаление строгого режима ради этой ошибки, по меньшей мере, смешно.

Вверх

Как насчет этого, если у нас нет решения?

до)
image

после)
image

та же проблема до сих пор.

та же проблема до сих пор.

та же проблема до сих пор

такая же проблема до сих пор.

Все еще сломан

Как насчет этого, если у нас нет решения?

до)
(большое изображение)

после)
(большое изображение)

Еще лучше: если вы закроете консоль, все предупреждения исчезнут 😄

Шутки в сторону: столкнуться с этой проблемой тоже на нескольких компонентах

все та же проблема
помогает избавиться от React.StrictMode

Вопрос к любому, кто следит за потоком ... что это вообще ЗНАЧИТ (конкретно ошибка), и смотрел ли кто-нибудь на код, чтобы узнать, что может быть причиной (или почему это важно). Честно говоря, я бы попытался исправить это, но у меня нет времени (или знания кодовой базы), чтобы исследовать и понять, почему это происходит или где в кодовой базе существует ошибка.

edit: очевидно, я должен добавить, что я тоже испытываю ошибку (хотя у меня ее не было несколько дней назад, поэтому мне интересно, какие конкретные обстоятельства вызывают ошибку, т.е. в каких ситуациях является устаревшим метод findDOMNode вызвал кнопку?)

Возможно, нам следует начать рассматривать эту цепочку как совместную работу и перечислять ситуации, при которых мы получаем предупреждение и начинаем устранять неполадки, а не просто заявлять «да, есть ошибка, пожалуйста, исправьте».

@shawnpetros
Я ни в коем случае не эксперт по кодовой базе, но использую ее достаточно часто, чтобы столкнуться с проблемой не только на элементе кнопки. Потратил немного времени на изучение и узнал, что основное использование findDomNode происходит в волновом компоненте. Что такое волна? Из того, что я могу собрать, инструмент для анимации вещей, таких как компоненты кнопок среди прочего.

Помимо отключения строгого режима (к которому я прибегал до тех пор, пока не будет доступно более подходящее исправление или пока у меня не будет времени узнать больше о волне, чтобы предложить его самому ...), судя по виду кода, может быть проще добавить PR использовать реквизиты для отключения использования волны, чем полностью заменить использование findDomNode на данный момент. Небольшой поиск в Google покажет, что это не просто проблема дизайна муравьев (например: 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
если предположить, что это влияет на несколько компонентов, это действительно будет более сложной задачей, чем у кого-либо есть «свободное» время для ...

Та же проблема

Этот билет открыт более 7 месяцев.

Одна и та же

27755 есть запрос на перенос, чтобы исправить эту проблему

+1

Я не знаю о правилах в этом проекте, но в других сообществах не рекомендуется спамить «такие же» и «+1» комментарии, потому что

  • если что-то является насущным, разработчики обычно хорошо об этом знают,
  • это не добавляет ничего существенного для решения проблемы,
  • разработчикам нужно время, чтобы просмотреть свои уведомления,
  • это отнимает время у других наблюдателей, у которых также много спама в своих уведомлениях.

Возможно, мы можем просто выразить поддержку этой проблеме, используя: +1: в главной проблеме.

Спасибо за работу над исправлением, мне очень нравится библиотека. К сожалению, я все еще вижу это предупреждение с [email protected].
Появляется только после срабатывания асинхронного валидатора при использовании ввода внутри формы.

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

У меня такая же проблема с

Была ли эта страница полезной?
0 / 5 - 0 рейтинги