react component Did Mount가 실행되지 않음

react component Did Mount가 실행되지 않음

새로운 리액션 프로젝트를 세웠고 어떤 이유에서인지componentDidMount메서드가 호출되지 않았습니다.

에 콜을 발신함으로써, 이 동작을 확인했습니다.console.log에componentDidMount콘솔에 출력이 표시되지 않습니다.

더 나아가,this.setState()동작하지 않습니다.

왜 그런 일이 일어났는지 난 꽤 당황스럽다.componentDidMount가 호출되지 않습니다.React "v0.14.0"과 "v0.14"를 모두 사용해 보았습니다.3".

componentDisMount'가 호출되지 않는 이유는 무엇입니까?

코드:

var React = require('react');

var RecipePage = React.createClass({
  componentDidMount: function() {
    console.log('mounted!');
  },
  render: function() {
    return (
      <div>Random Page</div>
    );
  }
});

module.exports = RecipePage;

이 일은 내가 이 일을 겪었을 때componentWillMount()같은 클래스에 2x가 정의되어 있습니다.이로 인해 런타임 오류는 발생하지 않았습니다.두 번째 정의를 간단히 삭제하면 모든 것이 작동하기 시작합니다.

그러니까... 이것 봐...나는 마침내 (후방 전문가의 도움으로)componentDidMount 메서드가 부팅되지 않은 이유는 서버가 서버 측의 모든 react + html을 번들하여 처리하고 있었기 때문입니다.('render' 메서드와 'getInitialState' 메서드만 호출되어 클라이언트의 브라우저를 통해 전달되는 'html' 템플릿을 만듭니다.)끝났다고 생각하기 때문에 거기서 멈춘다)

해결 방법: 서버를 통해 컴파일된 html을 제공할 수 있는 방법을 찾고, 클라이언트 측에서 리액트 자체의 이벤트에 액세스하여 다시 "발화 가능"할 수 있도록 합니다."view" 파일(index.js 또는 index.html)을 컴파일할 때 템플릿에 bundle.js 코드를 다시 삽입하는 "Application.start()" 스크립트를 포함했습니다.그런 다음 gulp 파일에서 "Application" 변수를 내보내 "view" 파일이 액세스할 수 있도록 했습니다.

가... 이것 때문에 내 머리카락을 뽑았어.서버 측과 클라이언트 측 렌더링의 판독 시간

제 경우엔, 또 다른 것이 있었습니다.componentDidMount법전의 앞부분

create-react-app 템플릿이 있습니다.App 컴포넌트에 ComponentDidMount를 추가했습니다.console.log와 경고를 넣었습니다.부팅되지 않으며 React 또는 브라우저에 오류가 없습니다.나는 크롬과 파이어폭스를 시도했다.

픽스: 저는 PC를 재부팅했습니다.그리고 효과가 나타나기 시작했다.이유는 모르겠지만 이것으로 문제가 해결되었습니다.

업데이트: 대문자 "C"가 없습니다. "ComponentDidMount"가 아닌 "componentDidMount"입니다.잘 시간인 것 같아요.

제,, 는는으로 전화를 합니다.componentDidMount()서비스로부터의 데이터 취득(API 호출) 및 렌더링 기능에는 이 호출에서 반환되는 데이터를 사용하는 컴포넌트가 있습니다.

, 에, 「」는 「」입니다.render() "이러한 오류는 다음과 같습니다)."TypeError:cannot read property 'XXXX' of undefined" 생겼는데요.componentDidMount전혀 호출되지 않습니다.

저는 그 합니다.myData !== null컴포넌트 자체를 반환하기 전에 - 이 경우 데이터를 사용하는 내부 컴포넌트를 실제로 서비스에서 가져오는 데이터 앞에 렌더링하지 않는 범용 로더\spinner를 사용할 수 있습니다.

예:

componentDidMount() {
    const { GetMyDataFromServiceFunc } = this.props;

    GetMyDataFromServiceFunc ("150288");
}

render() {
    const { details, loading } = this.props;
    
    if (!details)
        return (<GenericLoader />);
        
        return (

        <FullScreenModal
            <Wizard className="order-new-wizard">

                <Component1 editable={false} dataToComponent1={details}
                    goNextStep={this.goNextStep} /> 

                <Component2 values={details.customerDetail} goNextStep={this.goNextStep} />
            </Wizard>
        </FullScreenModal>
        );
    }
}

module.exports를 TestPage가 아닌 RecipePage를 가리키도록 변경해야 합니다.

module.exports = RecipePage;

저는 ComponentDidMount의 대문자 "C"가 원인입니다.

componentDidMount로 변경하여 동작.

또한 componentDidMount가 예상대로 부팅을 시작한 후 클래스에서 componentDidUpdate를 선언했습니다.

componentDidMount 함수에 콘솔로그 문이 있지만 이 함수는 실행되지 않기 때문에 실행되지 않을 수 있습니다.렌더 함수와 같이 componentDidMount가 호출되기 전에 오류가 발생하면 콘솔로그가 표시되지 않습니다.렌더링 함수에 코드를 코멘트 아웃 해, 표시되는지 확인해 주세요.

Import가 .export default수입하다했을 때, ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」componentDidMount…

는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.onComponentDidMount()componentDidMount() 팜

componentDidMount제가 실수로 두 번 불렀기 때문에 저를 위해 발포하지 않았습니다. 콘솔되지 않습니다.그 중 하나를 제거하는 것은 완벽하게 작동했다.

언급URL : https://stackoverflow.com/questions/33990133/react-componentdidmount-not-firing