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.length > 0 && someArray.map() }

而不是

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

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

第三，为了正确等待找到结果，通常的做法是使用redux-thunk。 Redux-thunk有助于推迟调度操作，直到满足某些条件（在您的情况下，您希望发送＆＃34;找到的数据＆＃34;只有在找到数据时才执行操作。）

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

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;
  }
}

从这里，您的减速器可以简单地填充关注幻灯片的状态部分，如此

{{1}}

状态更新后，您的整个应用都会重新呈现，现在您可以映射实际数据。

所以，在我看来，最好的方法是使用redux-thunk和promises。请参阅上面的链接，了解如何在应用程序中设置redux。如果不熟悉承诺，请参阅this。

干杯

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

1 个答案: