1

我无法使用 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);

作为证据，这里有图片：

在此处输入图像描述

4

1 回答 1

3

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

{ someArray.map() }

宁愿做

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

您可能不需要这样做，但这是一种很好的做法。

第三，要正确等待结果被发现，通常的做法是使用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 不熟悉，请参考这里。

干杯

于 2018-04-17T12:41:33.893 回答