Question

我想要的结果是我的组件不呈现，除非所有async函数都已分派。我使用它作为包装器来确保一切都已发送。我尝试了两种方法：

调用componentWillMount中的所有内容，然后使用setState设置loaded = true。然后，我可以根据我的状态加载密钥渲染组件。

ajax = async () => {
  try{
    const { dispatch } = this.props;
    dispatch(loadPack('ars'));
    dispatch(loadPack('acr'));
    await dispatch(loadProds());
    await dispatch(loadRepls());
    await dispatch(checkEligibile());
    }catch (e) { console.log(e)}
 }

 componentWillMount() {
   this.ajax().then(() => {
     this.setState({ loaded: true });
   });
 }

render() {
 const { loaded } = this.state;
 return loaded ? <Component/> : null;
}

这会得到所需的结果，除了我看到这个错误：

ExceptionsManager.js：71警告：只能更新已安装或已安装零件。这通常意味着您调用了setState，replaceState或 forceUpdate在未安装的组件上。这是一个无操作。

我尝试在mapDispatchToProps调度。理想情况下loaded应该返回true，我应该看到this.props.loaded = true加载我的组件。但是，我收到的是承诺，而不是结果。

我感觉被困在这里，不知道还有什么可以尝试。有什么建议吗？

const loadAsync = async dispatch => {
  dispatch(loadPack('ars'));
  dispatch(loadPack('acr'));
  await dispatch(loadProds());
  await dispatch(loadRepls());
  await dispatch(checkEligibile());
  return true
 };

 export const mapDispatchToProps = dispatch => ({
   loaded: loadAsync(dispatch),
 });

Answer 1

由于您使用的是redux，因此您拥有全局redux状态。因此，在所有调度之后，再发送一个将reducer状态设置为true的操作，表示已调度所有操作。

在组件中，使用dispatchStateToProps方法将reducer状态转换为props，然后使用该prop检查天气是否已调度所有操作。它应该大致看起来像这样

ajax = async () => {
  try{
    const { dispatch } = this.props;
    dispatch(loadPack('ars'));
    dispatch(loadPack('acr'));
    await dispatch(loadProds());
    await dispatch(loadRepls());
    await dispatch(checkEligibile());
    // Add one more action here
    await dispatch(everythingDispatched());
    }catch (e) { console.log(e)}
 }

然后是一个跟踪

的reducer状态

dispatchTrackerReducer.js
switch(action.type){
  case "everythingDispatched" :
       everythingDispatched: true
       break;
}

然后在组件中使用像这样的mapStateToProps

render() {
 const { everythingDispatched } = this.props;
 return everythingDispatched ? <Component/> : null;
}

function mapStateToProps(state){
  return {
       everythingDispatched:state.dispatchTrackerReducer.everythingDispatche
  }
}

mapDispatchToProps中的异步 - 包装器，以确保在呈现

1 个答案: