在获取数据时，将null或undefined传递给组件会更好吗？

Question

在我的反应应用中，我经常从API获取数据，这留下了我的组件无法呈现数据的时间。根据我的研究，我现在明白如果你传递undefined，将使用defaultProps，但如果你传递null，则忽略defaultProps。

我的代码当前的结构方式，我在组件中有defaultProps，但是它的父级在加载数据时传递null，所以无论如何我都会检查所有内容。

手动传递未定义的值以触发defaultProps（在获取数据的上下文中）更有意义吗？

此外，这是否也适用于我的redux选择器（mapStateToProps）？

e.g。

<Component bedrooms={bedrooms || undefined} />

Answer 1

保持支持说'loading'，类型为boolean，当为true时，将显示加载程序组件，否则显示卧室的实际组件。

像：

<Component bedrooms={bedrooms} loading={bedrooms.length===0}/>

其中

Component = ({bedrooms, loading})=> loading? <Loader/>: <div>bedrooms..</div>

您也可以将加载工作卸载到像

这样的HOC

const withLoader = (Component)=>({loading, ...props})=>loading? <Loader/>: <Component {...props}/>

所以，现在

const withLoaderComponent = withLoader(Component);

使用<withLoaderComponent {...props}/>

这里的Loader组件可以是任何占位符或加载动画等。

此外，使用redux，我们可以将“加载”状态移动到存储，其中，每个onfetch操作都将“loading”设置为true，并且在fetchSuccess操作之后将其设置为false。这里，Loader也可以是连接组件。所以，现在我们可以有以下解耦结构。

<ConnectedLoader/><ConnectedComponent/>

其中加载ConnectedLoader的道具和ConnectedComponent的道具，将使用mapStateToProps / selectors映射到商店的状态

Answer 2

另一种方法是使用Javascript的空检查。

{this.state.bedrooms && <Component bedrooms={this.state.bedrooms} />}

另一种方式是

{this.state.bedrooms ? <Component bedrooms={this.state.bedrooms} /> : null}

当React看到null时，它不会呈现任何内容。