如何处理渲染方法，直到 redux 返回结果?

Question

>我正在创建一个组件，该组件获取一些 api 来填充结果。在呈现之前，需要对这些 api 结果进行一些转换。我已经使用componentWillMount方法来设置redux状态。我需要处理render方法，直到将这些结果重新转换为道具。这需要一些时间。由于数据不可用，因此此时呈现方法将失败。我尝试设置default state但这似乎不起作用，因为redux state将使用mapStateToProps方法映射到道具。处理这种情况的正确和有效的方法是什么？

提前致谢

Answer 1

通常，当数据不存在时，您将呈现不同的东西(或者根本不会渲染(。

{this.props.unreadMessages.length > 0 &&
<h2>
You have {this.props.unreadMessages.length} unread messages.
</h2>
}

或：

if (this.props.unreadMessages.length > 0) {
return <Main unreadMessages={this.props.unreadMessages} />;
} else {
return <Loading />
}

您还可以使用默认的初始状态，并在没有数据时基于该状态进行渲染props。 也许是这样的：

<h2>
Hello, {this.props.username || this.state.username}.
</h2>

此外，建议的 Ajax 调用生命周期钩子是componentDidMount。

Answer 2

如果数据尚未准备就绪，则可以使用条件呈现。添加有关数据的其他指标，如下所示

render() { 
if (!this.props.data) { 
return null;
}
return <YourComponent />;
}

而且，您最好在生命周期componentDidMount获取数据。

Answer 3

我会使用三元表达式作为保护子句来检查渲染方法中的道具。像这样的东西，例如：

render(){
return (<React.Fragment>
{ this.props.user ? <IntendedComponent ...this.props.user /> : <Loading user={defaultUser}/> }
<React.Fragment/>);
}

如果用户 prop 尚未填充，它应该为空，并显示具有默认硬编码值的备用组件(如示例中的加载组件(或预期组件。数据就绪后，您可以根据需要将数据传递给组件。

Answer 4

首先，组件 WillMount 不是调用 API 的好方法， 根据反应文档：

componentDidMount(( 在组件 已安装(插入树中(。需要 DOM 的初始化 节点应该转到此处。如果需要从远程终结点加载数据， 这是实例化网络请求的好地方。

此方法是设置任何订阅的好地方。如果你这样做 那，不要忘记在组件将卸载((中取消订阅。

这是链接： https://reactjs.org/docs/react-component.html#componentdidmount

在加载数据之前，您可以执行以下操作： 将一个名为dataLoaded:false的标志置于 redux 状态 加载数据后，您执行了可以轻松更改它的操作。

在render()

if(this.props.dataLoaded){
<loadingComponent></loadingComponent>
} else {
//operation is performed
}

Answer 5

由于您使用的是Redux，因此您可以使用 ES6 默认参数在Reducers中设置默认Redux state。像这样：

const apiStatus = (state='fetching', action) => {
// handle dispatch action
}

在 React 中，您可以使用条件渲染来render加载图标，例如，当状态为fetching时。然后当状态finished时，取结果并render实数元素。

要在 Redux 中使用异步，请参阅此链接： 异步操作