componentDidMount가 콜백을 참조하기 전에 호출되었습니다.

componentDidMount가 콜백을 참조하기 전에 호출되었습니다.

문제

인라인 함수 정의를 사용하여 반응을 설정하고 있습니다.

render = () => {
    return (
        <div className="drawer" ref={drawer => this.drawerRef = drawer}>

후 리 then then thencomponentDidMountDOM ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」

componentDidMount = () => {
    // this.drawerRef is not defined

가 로는 ★★★★★★★★★★★★★★★★★★★★★★★.ref은 마운트단, "마운트 중"을 추가합니다.console.log이 드러나다componentDidMount참조 콜백 함수 전에 호출됩니다.

예를 들어 Github에 대한 이 논의에서 살펴본 다른 코드 샘플도 같은 가정을 나타내고 있습니다.componentDidMount어느 쪽인가 하면 불러야 한다ref, 에 정의되어 있습니다.render심지어 대화에도 언급되어 있다.

그러면 componentDisMount는 모든 ref 콜백이 실행된 후에 꺼집니까?

네.

리액트 15.4.1을 사용하고 있습니다.

내가 시도해 본 다른 것

「 」를 하려면 , 「 」ref.

setDrawerRef = (drawer) => {
  this.drawerRef = drawer;
}

후 리 then then thenrender

<div className="drawer" ref={this.setDrawerRef}>

이 경우 콘솔로깅을 통해 콜백이 실제로 호출되고 있는 것을 알 수 있습니다. componentDidMount

간단한 답변:

ref가 또는 후크 전에 설정되는 것을 react로 보증합니다. 하지만 실제로 렌더링된 아이들에게만요.

componentDidMount() {
  // can use any refs here
}

componentDidUpdate() {
  // can use any refs here
}

render() {
  // as long as those refs were rendered!
  return <div ref={/* ... */} />;
}

이는 "React always set all refs with this hooks run"을 의미하는 것은 아닙니다.
레퍼런스가 설정되지 않은 몇 가지 예를 살펴보겠습니다.

---

렌더링되지 않은 요소에 대해 참조가 설정되지 않음

React는 렌더링에서 실제로 반환된 요소에 대해서만 참조 콜백을 호출합니다.

이것은 당신의 코드가 다음과 같이 생겼을 경우

render() {
  if (this.state.isLoading) {
    return <h1>Loading</h1>;
  }

  return <div ref={this._setRef} />;
}

처음에는 '''입니다'''this.state.isLoadingtrue, 기대하지 마십시오.this._setRefcomponentDidMount.

.첫 번째 렌더링이 반환된 입니다.첫 번째 렌더가 반환된 경우<h1>Loading</h1>React는 다른 조건에서는 첨부해야 할 참조가 필요한 다른 것을 반환한다는 것을 알 수 있는 방법은 없습니다.참조를 설정하는 것도 없습니다.<div>, 「」는 「」입니다.render()방법

이 예에서는 " "만"을합니다.componentDidMount발사될 것이다.단, 로 변경되면this._setRef 붙이고 그 다음에componentDidUpdate발사될 것이다.

---

기타 컴포넌트 주의

참조가 있는 아이를 다른 컴포넌트로 넘길 경우 렌더링을 방해하거나 문제를 일으킬 수 있습니다.

예를 들어 다음과 같습니다.

<MyPanel>
  <div ref={this.setRef} />
</MyPanel>

않다MyPanelprops.children★★★★

function MyPanel(props) {
  // ignore props.children
  return <h1>Oops, no refs for you today!</h1>;
}

다시 말씀드리지만 버그가 아닙니다.DOM 요소가 생성되지 않았기 때문에 React가 참조를 설정할 수 있는 것은 없습니다.

---

전에 ReactDOM.render()

이전 섹션과 마찬가지로 참조가 있는 아이를 다른 컴포넌트로 넘길 경우 이 컴포넌트가 해당 참조를 제때 부착할 수 없도록 할 수 있습니다.

를 들어 ', '아이를 돌려보내지 않는다', '아이를 돌려보내지 않는다' 이런 render() 전화하고 요.ReactDOM.render()라이프 사이클 훅으로.여기서 예를 찾을 수 있습니다.이 예에서는 다음을 렌더링합니다.

<MyModal>
  <div ref={this.setRef} />
</MyModal>

★★★★★★★★★★★★★★★★★.MyModal합니다.ReactDOM.render()을 불러들이다 componentDidUpdate다음 중 하나:

componentDidUpdate() {
  ReactDOM.render(this.props.children, this.targetEl);
}

render() {
  return null;
}

React 16 이후 라이프 사이클 중 이러한 최상위 렌더 호출은 트리 전체에 대해 라이프 사이클이 실행될 때까지 지연됩니다.이게 왜 당신이 첨부한 레퍼런스를 제시간에 보지 못하는지를 설명해 줄 수 있어요.

이 문제의 해결책은 네스트 대신 포털을 사용하는 것입니다.ReactDOM.render 삭제:

render() {
  return ReactDOM.createPortal(this.props.children, this.targetEl);
}

이 우리 ★★★★★★★★★★★★★★.<div>참조가 있는 경우 실제로 렌더링 출력에 포함됩니다.

따라서 이 문제가 발생할 경우 컴포넌트와 참조 사이에 하위 렌더링을 지연시킬 수 있는 요소가 없는지 확인해야 합니다.

마세요setState 자료를

.setState, 「가 되기 전에 「콜백」으로 합니다.componentDidMount먼저 실행됩니다.

---

아직 문제가 있나요?

위의 도움말에 대한 힌트가 없는 경우 React에 문제를 제출하면 살펴봅니다.

문제의 다른 관찰.

문제가 발생한 것은 개발 모드일 때뿐이라는 것을 알았습니다. 「」를 무효로 하는 되었습니다.react-hot-loader을 사용하다

사용하고 있다

• "hot-hot-hot-hot" : "3.1.3"
• "webpack": "4.10.2",

그리고 이건 전자 앱이에요.

부분적인 웹 팩 개발 구성

const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')

module.exports = merge(baseConfig, {

  entry: [
    // REMOVED THIS -> 'react-hot-loader/patch',
    `webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr`,
    '@babel/polyfill',
    './app/index'
  ],
  ...
})

렌더()에서 인라인 함수를 사용하는 것은 가능하지만 바인드 메서드를 사용하는 것은 크래시 하는 것을 보고 의아해졌습니다.

어떤 경우에도 기능

class MyComponent {
  render () {
    return (
      <input ref={(el) => {this.inputField = el}}/>
    )
  }
}

react-hot-loader를 사용한 크래시(ref는 componentDidMount에 정의되어 있지 않음)

class MyComponent {
  constructor (props) {
    super(props)
    this.inputRef = this.inputRef.bind(this)
  }

  inputRef (input) {
    this.inputField = input
  }

  render () {
    return (
      <input ref={this.inputRef}/>
    )
  }
}

솔직히 말해서 핫 새로고침은 "적합"을 얻기 위해 종종 문제가 있었습니다.개발 도구가 빠르게 업데이트되므로 프로젝트마다 구성이 다릅니다.아마 내 특정 설정을 수정할 수 있을 거야.그렇다면 여기서 알려드리겠습니다.

또한 setinterval에서 ref를 사용하는 것처럼 마운트 해제된 구성 요소의 ref를 사용하려고 하고 구성 요소 마운트 해제 중에 설정 간격을 지우지 않는 경우에도 이 문제가 발생할 수 있습니다.

componentDidMount(){
    interval_holder = setInterval(() => {
    this.myref = "something";//accessing ref of a component
    }, 2000);
  }

예를 들어 다음과 같이 항상 간격을 지웁니다.

componentWillUnmount(){
    clearInterval(interval_holder)
}

언급URL : https://stackoverflow.com/questions/44074747/componentdidmount-called-before-ref-callback