Question

在componentWillMount中拥有异步操作创建者需要时间才能完成，

同时，组件在没有提供数据的情况下呈现一次或两次，直到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
}

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

感谢。

Answer 1

我认为你应该使用mapStateToProps来映射状态项（redux）和props中的item。例如，当异步任务完成时，道具中的项目将自动更改。当道具改变时，组件将再次渲染。

在渲染功能中，您可以实现：

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

Answer 2

当你的应用程序没有需要呈现的数据时，它决定了它的外观。常用方法是

- 什么都不显示

-show loading spinner

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

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

在异步完成之前处理渲染

2 个答案: