Reactjs 在异步完成之前处理呈现

在

组件中有一个异步操作创建者需要时间才能完成

同时，在reducer更改状态并包含它之前，在不提供数据的情况下呈现组件一次或两次

请澄清处理尚未有数据的初始组件渲染的最佳方式

我发现自己在做这样的事情：

render() {
   if (!this.props.item) return <div></div>
   // this fails during initial renders without the if condition above.
   const { item: { foo: { bar } } } = this.props
}

render（）{
如果（！this.props.item）返回
//在没有上述if条件的初始渲染期间，此操作失败。
const{item:{foo:{bar}}}=this.props
}

我知道我可以在
mapStateToProps
中使用默认状态，但当实体（如item.foo.bar）具有嵌套字段时，这将不起作用

谢谢。
我认为您应该使用MapStateTrops将状态项（redux）映射到道具中的项。例如，异步任务完成后，道具中的项目将自动更改。
当道具更改时，组件将重新渲染

在渲染函数中，可以实现：

render(){
  {
    !this.props.item ? <div>No data</div> 
    : <div>
        item.foo.bar
      </div>
  }
} 

render（）{
{
！this.props.item？无数据
: 
item.foo.bar
}
} 
当应用程序没有需要渲染的数据时，它的外观应由应用程序决定。常见的方法是

-不露声色

-显示加载微调器

-显示与加载后内容外观大致匹配的占位符内容

在很多情况下，什么都不显示是可行的，尤其是在加载时间很快的情况下。如果加载时间通常较慢，则微调器可能比较合适。占位符内容需要花费更多的精力，但可以提供更少的不和谐加载体验，因为可以立即显示页面的结构，然后在加载数据时填充数据