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

IT技术 reactjs react-redux extreact
2021-05-07 03:05:08

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

作为证据，图片如下：

在此处输入图片说明

1个回答

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

{ 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 不熟悉，请参考这里。

干杯

其它你可能感兴趣的问题
上一篇适用于 32 位操作系统的切片器？ 下一篇全新的 Ender 3 在打印过程中不会挤出任何细丝