如何等到在 React-Redux 中设置接收到的同步数组的所有属性? [英] How to wait until all of the properties of received synchronous array are set in React-Redux?

问题描述

我无法使用 map() 函数进行渲染，因为数组的长度始终为 0，即使我从数组中获取数据也是如此.有没有办法设置时间间隔，直到异步数组正确加载?

I can't do map() function for rendering because the length of the array is always 0, even though I get data from the array. Is there a way to set time interval until the asynchronous array is loaded properly?

这是我的代码:

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

这里有一张图片作为证据:

As a evidence here is the picture:

推荐答案

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

First off, make sure the function call that initiates data fetching is invoked after the component is mounted. You do this so that when the state changes a re-render may occur. Secondly, before mapping through the array you expect to have data, make sure that it has something. That is, instead of

{ someArray.map() }

宁愿做

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

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

You probably don't need to do this, but it's good practice.

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

Thirdly, to properly wait for the results to be found, the usual practice is using redux-thunk. Redux-thunk helps in delaying dispatching an action until some criteria is met (in your case, you want to dispatch a "data found" action only when the data has been found).

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

Here is an example where we fetch carousel pictures and map through them in the view component. You can easily adapt this to your project.

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

从这里开始，您的减速器可以简单地填充状态中关心幻灯片的部分，就像这样

From here, your reducer can simply populate the part of state that cares about the slides, like so

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

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

As soon as the state is updated, your whole app re-renders and now you will be able to map through the actual data.

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

So, the best way, in my opinion, is to use redux-thunk along with promises. Refer to the link above on how to set up redux in your application. If not familiar with promises, please refer to this.

干杯

这篇关于如何等到在 React-Redux 中设置接收到的同步数组的所有属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！