Javascript 使用componentDidMount隐藏/显示组件

我正在尝试使用

componentdiddupdate

来显示加载微调器组件，它将

状态设置为
true
。加载程序不会显示，只是在
buildPosts（）
呈现之前显示一个空白。在函数执行时，如何显示
加载程序
组件

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 /> 
    );
}

constructor（）{
超级（）；
this.state={loaded:false}；
}
加载（）{
this.setState（{loaded:true}）；
}
componentDidUpdate（）{
这个。onload（）；
}
建筑柱（柱）{
返回posts.map（post=>
);
}
render（）{
const{posts，totalPages，pageNum=1}=this.props；
返回(
这个州有子弹吗？
(
{this.buildPosts（posts）}
{this.buildPagination（parseInt（pageNum），totalPages）}
) :  
);
}
假设没有post时将显示加载程序。您可能不需要加载
状态。这样怎么样：

  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 /> 
        );
  }

render（）{
const{posts，totalPages，pageNum=1}=this.props；
返回(
posts！==未定义和&posts.length>0？
(
{this.buildPosts（posts）}
{this.buildPagination（parseInt（pageNum），totalPages）}
) :  
);
}
你是说加载程序永远不会出现吗？或者它最初出现，但并不完全是在你想要它的时候？代码看起来是这样的，它会附带一个加载程序，一旦更新，它会将加载程序设置为false，然后在下一次渲染时它会生成帖子，但它不会生成帖子，并且会将
onload
绑定到
this
的正确值？React仅自动绑定自己的生命周期函数，您必须手动绑定添加到类中的任何函数，例如，使用构造函数中的
this.onload.bind（this）
。