在redux返回结果之前如何处理渲染方法？答案

【问题标题】：How to handle render method until redux has returned results?在redux返回结果之前如何处理渲染方法？
【发布时间】：2018-12-12 09:49:27
【问题描述】：

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

提前致谢

【问题讨论】：

标签： reactjs redux react-redux state

【解决方案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。

【讨论】：

【解决方案2】：

如果您的数据尚未准备好，您可以使用条件渲染。添加有关您的数据的其他指标，像这样

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

而且你最好在componentDidMount生命周期中获取数据。

【讨论】：

【解决方案3】：

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

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

如果尚未填充用户属性，则它应该为空并显示备用组件（如示例中的加载组件）或具有默认硬编码值的预期组件。数据到位后，您可以将数据传递给您认为合适的组件。

【讨论】：

【解决方案4】：

首先componentWillMount并不是调用api的好方法，根据反应文档：

componentDidMount() 在组件被调用后立即调用安装（插入树中）。需要 DOM 的初始化节点应该放在这里。如果您需要从远程端点加载数据，这是一个实例化网络请求的好地方。

此方法是设置任何订阅的好地方。如果你这样做那个，别忘了在 componentWillUnmount() 中取消订阅。

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

在加载数据之前，您可以执行以下操作：让一个标志进入 redux 状态，称为dataLoaded:false 加载数据后，您执行的操作可以轻松更改。

在render()

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

【讨论】：

【解决方案5】：

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

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

在 React 中，您可以使用 Conditional Rendering 到 render 加载图标，例如，状态为 fetching。然后当状态为finished时，取结果和render真正的元素。

要在 Redux 中使用 Async，请参阅以下链接： Async Action

【讨论】：