reactJS呈现空数据

在获取数据时，我希望它们先获取数据，然后进行渲染。它总是呈现空字符串，即使在我设置状态时，我也不明白为什么

class App extends React.Component {
  constructor () {
    super()
    this.state = {
      view: 'feed',
      posts: '' //data I want to render
    }

    this.changeView = this.changeView.bind(this)
  }

  componentDidMount () {
    this.getAllPosts() //getting the data
  }

  getAllPosts () {
    axios.get('/api/blogs')
      .then((response) => {
        console.log(response)
        this.setState({
          posts: response
        })
      })
      .catch((error) => {
        console.log(error)
      })
  }

  changeView(option) {
    this.setState({
      view: option
    })
  }

  renderView () {
    const {view} = this.state

    if (view === 'feed') {
      return <Feed blogs={this.state.posts}  handleClick={() => 
this.changeView('anypostview')}/> //passing data as props in Feed blogs
    } else {
      return <Post />
    }
  }
  render() {
    return (
      <div>
        <div className="nav">
          <span className="logo"
            onClick={() => this.changeView('feed')}>
            BLOGMODO
          </span>
          <span className={this.state.view === 'feed'
            ? 'nav-selected'
            : 'nav-unselected'}
            onClick={() => this.changeView('feed')}>
            See all Posts
          </span>
          <span className="nav-unselected">
            Write a Post
          </span>
          <span className="nav-unselected">
            Admin
          </span>
        </div>

        <div className="main">
          {this.renderView()}
        </div>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
视图：“提要”，
发布：'://我要呈现的数据
}
this.changeView=this.changeView.bind（this）
}
组件安装（）{
this.getAllPosts（）//获取数据
}
getAllPosts（）{
get（“/api/blogs”）
。然后（（响应）=>{
console.log（响应）
这是我的国家({
员额：答复
})
})
.catch（（错误）=>{
console.log（错误）
})
}
更改视图（选项）{
这是我的国家({
视图：选项
})
}
renderView（）{
const{view}=this.state
如果（视图=='feed'）{
返回
this.changeView（'anypostview'）}/>//在提要博客中作为道具传递数据
}否则{
返回
}
}
render（）{
返回(
this.changeView（'feed'）}>
布洛格莫多
this.changeView（'feed'）}>
查看所有帖子
发帖
管理
{this.renderView（）}
);
}
}

---

当我在Feed组件中登录数据时，我首先看到一个空字符串，然后它记录获取的数据。如何防止它呈现空字符串并等待先获取数据然后再呈现它？

在

render

中，检查

posts

状态是否为populate。
如果没有，则显示加载屏幕或gif

填充

posts

后，您将看到呈现的帖子

render（）{
const{posts}=this.state；
如果（！posts | | posts.length只需检查它是否为空字符串并返回null？我实际上会将初始状态设置为数组以确保一致性并检查长度。组件不能延迟自己的呈现。如果组件是顶级组件，则需要先获取数据，然后才呈现react DOM。如果它是子组件，则父组件NET需要首先获取数据，并且仅在数据可用时呈现子项。另一种方法是指示加载（例如微调器）虽然请求没有完成。我尝试了一个数组，但也会遇到同样的问题。非常感谢。这很有帮助！@LukasLukeStateczny欢迎您。如果它解决了问题，您会将其标记为答案吗？