Question

我正在尝试在我的应用程序中创建一个状态组件，该组件将在数据提取和其他网络相关事件期间进行更新。

componentWillReceiveProps(nextProps){
// This check is required otherwise setting state
// from here will end up in a rendering loop
if(!_.isEqual(this.props, nextProps)){
  if(nextProps.services.length != 0){
    if(nextProps.filters.length == 0){
      nextProps.setStatus('Fetching filters...');
      const { serviceId } = nextProps.params;
      const serviceIndex = nextProps
                            .services
                            .findIndex(
                                (service) => service.id == serviceId
                              );
      const serviceObj = nextProps.services[serviceIndex]; 
      nextProps.getFilters(serviceObj);
    } 
  }  
}

} 这里我使用componentWillReceiveProps生命周期事件来加载一些基于商店中另一组数据的数据（由于依赖性）。 setStatus方法负责使用新状态消息更新存储，并根据该状态组件进行更新。在这里你可以看到，我正在检查过滤器是否为空，我正在设置状态并尝试获取数据。现在，当我设置状态时，它正在更新商店，从而触发＆＃34;渲染＆＃34;进程再次。这将再次调用生命周期事件，并且当过滤器仍为空时，它将再次执行数据获取请求。目前，我已使用

停止了此操作

// Setting status will set the state and invoke data collection 
      // again as filters are still empty due to re-render 
      if(_.isEqual(this.props.status,nextProps.status) &&
        _.isEqual(this.props.filters,nextProps.filters)) {
        const { serviceId } = nextProps.params;
        const serviceIndex = nextProps
                              .services
                              .findIndex(
                                  (service) => service.id == serviceId
                                );
        const serviceObj = nextProps.services[serviceIndex]; 
        nextProps.getFilters(serviceObj);
      }

但这种做法更像是黑客攻击。你能为这个状态组件建议更好的设计方法吗？我可以维护受控组件吗？

Answer 1

我承认你特别想要完成的事情对我来说有点不清楚，但从我看来，我认为你应该创建一个Redux事件来通知你的组件这个过程的不同步骤和击中行动创作者作为回应。如果您试图以某种方式跟踪Redux商店之外的状态，那么您将遇到麻烦。

在数据提取期间更新负责显示状态的组件的状态

1 个答案: