如何等待在 React-Redux 中设置接收到的同步数组的所有属性？

我无法使用 map() 函数进行渲染，因为即使我从数组中获取数据，数组的长度始终为 0。有没有办法设置异步数组正确加载之前的时间间隔？

这是我的代码：

function ShortcutComponent({ usershortcuts }) {
    console.log(usershortcuts); // I get an array
    console.log(usershortcuts.length); //I get 0
    return (
        <Button ui="headerButton" arrow={false} ripple={false} iconCls="icon-directions" border={false} handler={() => this.loadData()}>
                <Menu title="Shortcuts">
                    {usershortcuts.map((item) => {
                       <MenuItem key={item.id} iconCls={item.shortcutDefinition.iconCls} text={item.shortcutDefinition.description} />
                    }
                </Menu>
            </Button>
    )
}

const mapStateToProps = (state) => {
    return { 
        usershortcuts: state.usershortcuts
    }
};


const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(usershortcutAction, dispatch)
    }
}


export default connect(mapStateToProps, mapDispatchToProps) (ShortcutComponent);

作为证据，这里有图片：

首先，确保在组件安装后调用启动数据获取的函数调用。这样做是为了当状态更改时可能会发生重新渲染。其次，在映射您希望拥有数据的数组之前，请确保它有一些东西。也就是说，而不是

{ someArray.map() }

宁愿做

{ someArray.length > 0 && someArray.map() }

你可能不知道need这样做，但这是一个很好的做法。

第三，为了正确等待结果被发现，通常的做法是使用redux-thunk。 Redux-thunk 有助于延迟分派操作，直到满足某些条件（在您的情况下，您希望仅在找到数据时分派“数据找到”操作）。

这是一个示例，我们获取轮播图片并在视图组件中映射它们。您可以轻松地将其适应您的项目。

export function loadCarouselSlidesThunk() {
  return dispatch => {
    dispatch(setIsLoadingAction(true));
    getCarouselSlides().then(pictures =>
      dispatch(setCarouselSlidesAction(pictures)));
  };
}

从这里开始，您的减速器可以简单地填充关心幻灯片的状态部分，如下所示

export default function carouselReducer(state = initialSate, action) {
  switch (action.type) {
    case setIsLoading.actionType:
        return { ...state, isLoading: action.payload };
    case setCarouselSlides.actionType:
        return { ...state, carouselSlides: action.payload, isLoading: false };
    default:
        return state;
  }
}

一旦状态更新，您的整个应用程序就会重新渲染，现在您将能够映射实际数据。

因此，在我看来，最好的方法是将 redux-thunk 与 Promise 一起使用。请参阅上面的链接，了解如何在应用程序中设置 redux。如果不熟悉Promise，请参考this.

Cheers