은퇴ReactDOM.render () 메서드의 태그가 정상적으로 작동합니다.

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

동일하거나 제안에 관한 해결책이 있습니까?

버튼을 위해 엄격 모드를 제거하는 것은 말도 안됩니다. 이것은 수정해야하는 antd의 합법적 인 문제입니다.

같은 오류가 발생합니다

# 9870과 같이 많은 마이그레이션을 수행해야합니다.

https://ant.design/docs/react/use-in-typescript 가이드를 사용하여 새로 설치 한 후에도 동일합니다.

나는 같은 문제를 가지고있다

desc

경고 : findDOMNode는 StrictMode에서 더 이상 사용되지 않습니다. findDOMNode에 StrictMode 내부에있는 Wave의 인스턴스가 전달되었습니다. 대신 참조하려는 요소에 직접 참조를 추가하십시오. https://fb.me/react-strict-mode-find-node에서 refs를 안전하게 사용하는 방법에 대해 자세히 알아보십시오.

풀다

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 릴리스에서 지원되지만이를 사용하는 애플리케이션은 새 버전으로 마이그레이션해야합니다.
다음 구성 요소를 업데이트하십시오. 하위 메뉴

같은 경고를 받았습니다

같은 문제

같은 문제도 :(

여기에서 하나 더, 장애인과 함께 작업,하지만 장기적인 해결책이 아니기를 정말로 바랍니다.

같은 문제

여기에도 같은 문제가 있습니다.

여기서도 같은 문제입니다. 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, 우리는 귀하의 제안 / 피드백에 전적으로 동의합니다.이 문제를 해결하기 위해 Pull Request 를 십시오 . Pull Request를 올바른 브랜치 (기능 브랜치의 새 기능, ​​다른 기능은 마스터 브랜치)로 보내 주시고 , Pull Request

같은 문제

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)

같은 문제로, 다음과 같은 간단한 데모를 통해 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를 끄고 개미 디자인 팀이이 문제를 해결하고 패키지를 업데이트 할 때까지 기다려야한다고 생각합니다.

여기에 같은 문제, 그리고

여기에서 하나 더, 장애인과 함께 작업,하지만 장기적인 해결책이 아니기를 정말로 바랍니다.

바로 그거죠

최신 버전 (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

여기에 같은 문제
.
수정은 놀랍습니다! 감사합니다 antd 팀!

같은 문제

그래서 어떤 해결책?

하나 추가

같은 문제.

이 문제도 해결하십시오!

Button에서도이 문제를 볼 수 있습니다.

고쳐주세요

여기에서 같은 문제에 직면

나는 같은 문제가 있습니다. 누군가이 문제에 대해 작업하고 있습니까?

antd와 관련이있는 것이 확실합니까? 나는 antd 3로 전환했지만 여전히 같은 문제가 있습니다.

예, 구성 요소를 사용하고 있기 때문 일반 html 버튼 구성 요소를 사용할 때 오류가 발생하지 않습니다.

여기도 마찬가지입니다. 상당히 시급한 문제인 것 같습니다. Ant D 어디있어?

현재 PR 작업중인 사람이 있습니까? 하나 쓰기 시작할 수 있습니다

@caelinsutch 내가 아는 한, 아무도.

주요 문제는 findDOMNode 사용으로 인해 이것 또는 이 하나

다음을 사용하여 해결 된 문제 :

공식 예제에서 영감을 얻었습니다 : 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/blob/dff19af744cce8920f8038f3d32a3051cae7ef50/components/button/button.tsx#L265 -L269
  (type = "link")를 사용하면 Wave 구성 요소를 사용하지 않습니다. 이것이 @CathyXian이 언급 한 것입니다.

• 스위치 https://github.com/ant-design/ant-design/blob/dabec4c8331c6171aaac08ad8b347c6ae754f032/components/switch/index.tsx#L65

• 태그 https://github.com/ant-design/ant-design/blob/e1299bfcc97a97078c51f33ae939d815e4eacf7f/components/tag/index.tsx#L114 -L127

웨이브 컴포넌트를 리팩토링하여 이전 메소드를 제거해야합니다.
그리고 다른 구성 요소도 해당 메서드를 제거해야합니다. 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> . 필요하지 않아야합니다.

Tabs conponent에서도 발생했습니다.

여기도 마찬가지입니다.
더 높은 우선 순위를 부여해 주시겠습니까?

같은 문제 😓

여기에도 같은 문제가 있습니다. 누구든지 해결책을 찾았습니까?

여기에도 같은 문제가 있습니다. 누구든지 해결책을 찾았습니까?

위에서 설명한대로 코드를 리팩토링하는 솔루션이 있다는 의미입니다. 이번 주 후반에 살펴 보겠습니다.

감사합니다! 나도 같은 문제가 있습니다!

같은 문제

같은 문제

                  `<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 구성 요소에서 나오지만 실제로 componentDidMount 및 onTransitionStart 의 Wave 구성 요소에 있다고 생각합니다. findDOMNode(this) 대신 ref를 사용할 수 있습니까?

나도

+1

+1

+1

개발자가 규칙을 따르고 이메일을 통해이 스레드를 구독하는 모든 사람을 괴롭히는 데 +1을 두지 않기를 바랍니다. 그것은 매우 성 가시고 비전문적입니다. @kreuzhofer @Lemii @moderndegree @TechieQian @lefterisk 및 기타

Ant 디자인 메뉴를 사용할 때도 동일한 문제

여기에 같은 문제. 최대한 빨리 수정해야합니다

Ant Design Button을 사용할 때도 동일한 문제

+1

여기에도 같은 문제가 있습니다.

여기에서 같은 문제는 엄격 모드를 끌 필요가없는 솔루션이나 해결 방법을 정말 좋아할 것입니다.

나는 같은 문제에 직면하고 있습니다

여기에 같은 문제

하위 메뉴와 동일한 문제

@Ant 팀, 나는 이것을 열어두고 문제를 잠그고 음소거하는 것이 좋습니다. 이러한 추가 +1과 나 역시 문제 해결에 도움이되는 가치가 전혀 없습니다. 대신 눈에 띄는 업데이트를 찾는 사람들을 위해 소음과 스팸을 생성합니다. 돕고 싶다면 코드 리뷰에 기여하고 자르세요.

모든 일에 감사드립니다! :)

방금 React TypeScript 프로젝트에 antd를 설치했고 버튼을 사용하자마자 오류가 발생했습니다. 이것에 대한 해결책이 없다는 것을 알게되어 슬프다.

ant.design 버튼도 마찬가지입니다.
"antd": "^ 4.6.3",
"반응": "^ 16.13.1",
"react-dom": "^ 16.13.1",

업데이트가 있습니까? 아니면 해결 방법?

같은 문제

코드의 첫 번째 줄에 오류가보고됩니다. . . 아직 수리되지 않았습니다. .

내 프로젝트에서 버튼을 사용할 때이 문제를 발견했습니다.
나는 "antd"에있다 : "^ 4.6.2"

모달을 사용하여 여기에 동일한 문제.
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에서도 여기서 문제가 발생합니다.

엄격한 모드 검사는 개발 모드에서만 실행됩니다. 프로덕션 빌드에 영향을주지 않습니다. 따라서 메시지가 성 가실 수 있습니다 ...
물론, 주석을 달아주는 것은 좋은 대답은 아니지만, 만약 그것이 당신에게 효과가 없다면 해결책을 제시 할 수 있습니까?

개미 4.6.6과 동일한 문제와 반응 16.13.1 :(

여러분,이 오류가 귀찮은 경우에 대한 제안 :

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

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

건배!

헉헉
개발 환경에서만 유효성 검사를 수행하므로 기본적으로 StrictMode를 제거하는 것과 같습니다. 따라서 StrictMode가 정확히 무엇을 위해 만들어 졌는지 자신의 코드에 대한 모든 검사를 비활성화했습니다.

같은 문제.

같은 문제.

같은 문제

@ enoh-barbu 나는 누구도 이것을 고치려고 적극적으로 노력하지 않는다고 생각합니다.

콘솔을 열 때 오류가 표시되는 것이 싫지만,이 오류를 위해 엄격 모드를 제거하는 것은 말도 안되는 일입니다.

쪽으로

해결책이 없다면 어떨까요?

전에)

후)

지금까지 같은 문제.

지금까지 같은 문제.

지금까지 같은 호

여전히 같은 문제.

여전히 깨져

해결책이 없다면 어떨까요?

전에)
(큰 이미지)

후)
(큰 이미지)

더 좋은 점 : 콘솔을 닫으면 모든 경고가 사라집니다 😄

농담 제쳐두고 : 여러 구성 요소 에서도이 문제에 직면

여전히 같은 문제
React.StrictMode 제거에 도움

스레드를 따르는 모든 사람에게 질문하십시오 ... 이것은 의미 (특히 오류)를 의미하며 누군가가 코드를보고 원인 (또는 중요한 이유)을 보았습니다. 정직하게 고쳐 보려고했지만, 왜 그런 일이 발생하는지 또는 코드베이스에서 오류가 존재하는 위치를 조사하고 확인할 시간 (또는 코드베이스에 대한 지식)이 없습니다.

편집 : 분명히 내가 오류를 경험한다는 것을 추가해야합니다 (몇 일 전에는 없었으므로 오류를 유발하는 특정 상황이 무엇인지 궁금합니다. 즉, 어떤 상황에서 사용되지 않는 메서드 findDOMNode가 버튼에 전화?)

아마도 우리는 단순히 "예, 오류가 있습니다. 수정하십시오"라고 말하는 것이 아니라 경고를 경험하고 문제 해결을 시작하는 공동 노력 및 나열 상황으로이 스레드를 처리해야합니다.

뿡 빵뀨
나는 코드베이스에 대한 전문가는 아니지만 버튼 요소뿐만 아니라 문제가 발생할 정도로 자주 사용합니다. 조사에 약간의 시간을 보냈고 findDomNode의 주요 사용이 웨이브 구성 요소에서 발생한다는 것을 배웠습니다. 웨이브 란? 버튼 구성 요소와 같은 것들에 애니메이션을 적용하는 도구를 수집 할 수 있습니다.

• 궁금한 점이 있으면 위반자가 여기에 표시됩니다. https://github.com/ant-design/ant-design/search?q=findDomNode
• https://github.com/ant-design/ant-design/blob/820aa04a96d6b1ced9697bb9293a293dfb676364/components/button/button.tsx#L295

Strict 모드를 비활성화하는 것 외에 (더 적절한 수정을 사용할 수있을 때까지 의지했거나 웨이브에 대해 더 많이 배울 시간이 있습니다 ...) 코드의 모양에서 추가하는 것이 더 쉬울 수 있습니다. 지금은 findDomNode 사용을 완전히 대체하는 것보다 웨이브 사용을 비활성화하기 위해 props를 사용하는 PR. 약간의 인터넷 검색은 이것이 단지 개미 디자인 문제가 아니라는 것을 보여줄 것입니다 (예 : 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
여러 구성 요소에 영향을 준다고 가정 할 때이 작업은 누구에게나 "자유로운"시간이있는 것보다 더 큰 작업이 될 것입니다.

추적 https://github.com/ant-design/ant-design/issues/26136

같은 문제

이 티켓은 7 개월 이상 열려 있습니다.

같은

27755이 문제를 해결하기위한 pull 요청이 있습니다.

+1

이 프로젝트의 규칙에 대해 잘 모르겠지만 다른 커뮤니티에서 "same"및 "+1"댓글을 스팸하는 것은 권장하지 않습니다.

• 긴급한 문제인 경우 개발자는 일반적으로이를 잘 알고 있습니다.
• 문제를 해결하는 데 큰 도움이되지는 않습니다.
• 개발자가 알림을 확인하는 데 시간이 걸립니다.
• 알림에 스팸이 많은 다른 감시자에게는 시간이 걸립니다.

아마도 우리는 주요 이슈에서 : +1 :을 사용하여이 이슈에 대한 지원을 간단히 표현할 수 있습니다.

https://github.com/ant-design/ant-design/pull/27755 에서 수정되었습니다.

수정 작업을 해주셔서 감사합니다. 도서관이 마음에 듭니다. 불행히도 [email protected] 에서이 경고가 계속 표시됩니다
양식 내부에서 입력을 사용할 때 비동기 유효성 검사기가 실행 된 후에 만 ​​나타납니다.

[email protected] 와 동일한 문제가