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

Question

我无法执行 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);

图片为证：

Answer 1

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

{ someArray.map() }

宁愿做

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

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

第三，适当等待结果被发现，通常的做法是使用redux-thunk。 Redux-thunk 有助于延迟调度动作，直到满足某些条件（在您的情况下，您希望仅在找到数据时调度 "data found" 动作）。

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

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 与 promises 一起使用。关于如何在您的应用程序中设置 redux，请参阅上面的 link。如果不熟悉promise，请参考this.

干杯

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

How to wait until all of the properties of received synchronous array are set in React-Redux?

reactjs

react-redux

extreact