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

Posted 2023-02-22

【中文标题】在redux返回结果之前如何处理渲染方法？

【英文标题】：How to handle render method until redux has returned results?

【发布时间】：2018-12-12 09:49:27

【问题描述】：

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

提前致谢

【参考方案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