Как ждать, пока все свойства полученного синхронного массива будут установлены в 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 помогает задержать отправку действия до тех пор, пока не будут выполнены некоторые критерии (в вашем случае вы хотите отправлять действие "найденные данные" только тогда, когда данные найдены).

Вот пример, где мы выбираем изображения карусели и отображаем их в компоненте вида. Вы можете легко адаптировать это к своему проекту.

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 в вашем приложении. Если вы не знакомы с обещаниями, пожалуйста, обратитесь к этому.

ура