Почему выдает ошибку cannot read propery of undefined?

Question

[tropicalfruit]

Всем привет,

Я только начал изучать реакт и столкнулся с такой вот проблемой. Получаю данные с сервера (меню), запрос возвращает данные корректно. Дальше через mapStateToProps прокидываю это к пропсам, в консоли у компонента свойство отображается нормально. Но если я пытаюсь в рэндере вызвать метод map, то мне выдает ошибку, что не может прочитать с undefined. Если вызвать лог, то до рэндера у компонента отображаются свойства, а при рэндере undefined. Не могу понять почему.

Comments

[tropicalfruit]

Да, косяк. Вот код редьюсера.

import { FETCH_MENU, RECIEVE_MENU, FETCH_MENU_ERROR } from '../actions/mainMenu'

const defaultState = {
	payload: {
		fetching: false,
		fetched: false,
		items: []
	}
}

export default function (state = defaultState, action) {
	switch(action.type) {
		case FETCH_MENU: 
			return {
				...state,
					payload: {
						fetching: true,
						fetched: false
					}
			}
		case RECIEVE_MENU:
		const {items} = action.payload
		return {
			...state,
				payload: {
					fetching: false,
					fetched: true,
					items: items
				}
		}
		case FETCH_MENU_ERROR:
		const {err} = action.payload
		return {
			...state,
				payload: {
					err: err
				}
		}
		default: 
			return state		
	}
}

[Антон Спирин]

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

import { FETCH_MENU, RECIEVE_MENU, FETCH_MENU_ERROR } from '../actions/mainMenu'

const defaultState = {
  items: [],
  fetching: false,
  fetched: false,
};

export default function (state = defaultState, action) {
  const { type, payload } = action;

  switch(type) {
    case FETCH_MENU: 
      return {
        ...state,
        fetching: true,
        fetched: false
      };
    case RECIEVE_MENU:
      return {
        ...state,
        fetching: false,
        fetched: true,
        items: payload.items
      };

    case FETCH_MENU_ERROR:
      return {
        ...state,
        fetching: false,
        err: payload.err
      };
    default: 
      return state;		
  }
}

Думаю понятно, что в mapStateToProps ключ payload надо убрать из цепочки.

Отложите пока react и изучите основы JavaScript. Принцип работы spread оператора вы точно совсем не понимаете.

Ключи состояния и типы в редьюсере не продуманы. Если дальше так будете продолжать, то накалепаете плохого и непродуманного кода. Изучайте хорошие примеры, читайте статьи, пробуйте, думайте. Но сначала основы JavaScript.

Answer 1

[Антон Спирин]

Видимо в initialState пустой массив items не задаете или уничтожаете его в редьюсере в кейсе FETCH_MENU. Без кода редьюсера точно не сказать. Но думаю дело именно в этом.

На будущее. Прикладывайте к вопросу примеры кода, а не скриншоты. И примеры именно того кода который вызывает ошибку, а не какого-то другого.