Почему возникает ошибка, когда я пытаюсь отобразить избыточный массив?

Question

Я использую React Hooks + Redux.
У меня есть объект, который содержит массив:

{
  id: "c59a3203-af94-49c3-abb6-87073619fbce"
  type: "block"
  attributes: {
    title: "THis is the first title"
    status: "published"
    published: true
    attachments: (4) [{…}, {…}, {…}, {…}] <== this is array I need to access 
    articles: [{…}]
    external_resources: []
  }
}

При нажатии я загружаю массив вложений (см. Ниже) в Redux и извлекаю его в моем компоненте с помощью хука useSelector:

(4) [{…}, {…}, {…}, {…}]
0: {id: "f15dbb5b-79e5-4204-9161-77bd6917814b", type: "attachment", attributes: {…}}
1: {id: "4971d5c8-df8e-4930-bafe-a12160493371", type: "attachment", attributes: {…}}
2: {id: "a275d3da-ad26-4144-819c-8f2db972ad6e", type: "attachment", attributes: {…}}
3: {id: "c15ea08c-a12f-4822-84bf-580f27fa1c94", type: "attachment", attributes: {…}}

Как вы можете видеть, это массив, но по какой-то причине, когда я вызываю его из моего компонента с помощью useSelector и отображаю его, Я получаю следующее сообщение об ошибке:

TypeError: Cannot read property 'map' of undefined

Здесь компонент:

const attachmentsData = useSelector(
  state => state.attachments.attachmentsData,
  shallowEqual
);

console.log(attachmentsData.map(x => x)) <== ERROR
console.log(attachmentsData) <=== SHOWS THE ARRAY WITHOUT ERRORS

Это редуктор:

const initialState = {
    attachmentsRaw: [],
    attachmentsData: []
};

const attachmentsReducer = (state = initialState, action) => {
    switch (action.type) {
        case ATTACHMENTS.GET_START:
            return {
                ...state,
                attachmentsRaw: getLoadingState()
            };

        case ATTACHMENTS.GET_SUCCESS:
            return {
                ...state,
                attachmentsRaw: getReadyState(action.data),
                attachmentsData: action.data
            };

        case ATTACHMENTS.GET_FAIL:
            return {
                ...state,
                attachmentsRaw: getErrorState()
            };

        default:
            return state;
    }
};
export default attachmentsReducer;

Что я делаю не так?
Я могу сказать, что когда компонент загружается, Redux загружает данные за долю секунды, что означает, что в моем компоненте первый рендеринг константа attachmentsData является пустым массивом [].

Любая помощь приветствуется. Джо

Answer 1

После того, что Шмили и Учебная Мания предложили выше, я нашел более чистое решение:

(attachmentsData || []).map(item => ( ....

Это странно. В журнале консоли я вижу, что attachmentsData отображается 3 раза. Первый раз в виде пустого массива, как сконфигурировано в redux, во второй раз как неопределенный (вот где проблема) и в третий раз как заполненный массив.

Итак, мне придется выяснить, почему, во-первых, он рендерит 3 раза, а во-вторых, почему во второй раз он не определен.

Я опубликую здесь, когда исправлю неопределенность.

Answer 2

Я думаю, что вы получаете данные до его заполнения массива

использовать это

attachmentsData? attachmentsData.map (x => x): void 0

Answer 3

Как вы загружаете данные в Redux? Если у вас есть данные о нагрузке c, имеющиеся в нагрузке, вы должны поместить их в initialState редуктора, а не впрыскивать его впоследствии.

https://redux.js.org/recipes/structuring-reducers/initializing-state/

Answer 4

Вы можете сначала проверить существование attachmentsData, а затем сопоставить массив.

Answer 5

attachmentsData все еще может быть неопределенным или не заполненным, когда вы пытаетесь отобразить его, чтобы исправить это, добавьте это к своему коду attachmentsData && attachmentsData.length && attachmentsData.map...