componentDidMount를 사용하여 구성 요소 숨기기/표시

state을 true으로 설정하는 componentDidUpdate을 사용하여 표시 할 로딩 스피너 구성 요소를 가져 오려고합니다. 로더가 표시되지 않고 buildPosts()이 렌더링 될 때까지 공백 만 표시됩니다. 함수가 실행되는 동안 Loader 구성 요소를 표시하려면 어떻게합니까?componentDidMount를 사용하여 구성 요소 숨기기/표시

constructor() { 
    super(); 
    this.state = {loaded: false}; 
} 


onLoaded(){ 
    this.setState({loaded: true }); 
} 

componentDidUpdate() { 
    this.onLoaded(); 
} 

buildPosts(posts) { 
    return posts.map(post => 
     <Post post={post} key={post.id} /> 
    ); 
} 
render() { 
    const { posts, totalPages, pageNum = 1 } = this.props; 


    return (
     this.state.loaded ? 
     (<div id="blog"> 
      {this.buildPosts(posts)} 
      {this.buildPagination(parseInt(pageNum), totalPages)} 
     </div>) : <Loader /> 
    ); 
}

출처

2016-10-05 Bomber

로더가 나타나지 않는다고 말하고 있습니까? 또는 그것이 처음에는 나타나지만 정확히 원하지 않을 때 나타납니다. 코드가 보이는 방식은 일단 로더가 false로 설정되면 로더가 올 것입니다. 그러면 로더를 false로 설정 한 다음 다음 렌더링에서 게시물을 빌드하지만 게시물을 빌드하지 않고 현재 로더가 표시되는 finalfreq

'onLoaded'를'this'의 올바른 값에 바인딩 했습니까? React는 자동적으로 자신의 라이프 사이클 함수를 바인드한다. 클래스에 추가하는 것은 수동으로 바인드해야한다. 생성자에'this.onLoaded.bind (this)'를 붙여라. –

게시물이 없을 때 로더가 표시된다고 가정합니다. load 상태가 필요하지 않을 수도 있습니다. 이 방법은 어떻습니까?

render() { 
    const { posts, totalPages, pageNum = 1 } = this.props; 


     return (
      posts !== undefined && posts.length > 0 ? 
      (<div id="blog"> 
       {this.buildPosts(posts)} 
       {this.buildPagination(parseInt(pageNum), totalPages)} 
      </div>) : <Loader /> 
     ); 
    }

출처

2016-10-05 16:29:44

componentDidMount를 사용하여 구성 요소 숨기기/표시

답변

관련 문제