Заполнение компонента реакции приводит к «TypeError: Невозможно прочитать свойство 'map' of undefined"

Question

Я пытаюсь заполнить компонент результатами, возвращаемыми из запроса GET.Компонент PageList находится ниже:

PageList.js

import React from 'react';
import Page from './Page';

const PageList = props => {
    return (
        <div>
            <h1>Your Pages:</h1>
            {props.pages.map(page => {
                return <Page page={page} key={page.id} />;
            })}
        </div>
    );
};
export default PageList

При загрузке страницы с этим компонентом я получаю ошибку TypeError: Cannot read property 'map' of undefined.Я полагаю, это потому, что реквизиты страниц неправильно передаются в PageList из действий и редукторов?Не уверен, что мне не хватает.

Я сопоставляю состояние с реквизитами следующим образом в компоненте контейнера, в котором находится PageList:

export default connect(
    mapStateToProps,
    {
        fetchPages,
        sendURL
    }
)(TestScraperFormContainer);

Вот действие fetchPages fxn:

export const fetchPages = () => {
    return dispatch => {
        dispatch({ type: FETCHING_PAGES });
        axios
            .get('*endpoint removed from post*', {
                headers: headers
            })
            .then(response => {
                dispatch({ type: PAGES_FETCHED, payload: response.data });
            })
            .catch(err => {
                console.log(err);
                dispatch({ type: PAGES_FETCH_ERROR });
            });
    };
};

и вот соответствующая логика редуктора:

export const testScraperFormReducers = (state = initialState, action) => {
    switch (action.type) {
        case FETCHING_PAGES:
            return { ...state, fetchingPages: true };
        case PAGES_FETCHED:
            return {
                ...state,
                pages: action.payload,
                fetchingPages: false,
                pagesFetched: true
            };
        case PAGES_FETCH_ERROR:
            return {
                ...state,
                error: 'Error fetching pages'
            };
        default:
            return state;
    }
};

Answer 1

Полагаю, вам нужно подключить ваш редуктор к функции PageList , поскольку он не знает, что такое props.pages .

Вы должны попробовать что-то вроде этого:

function mapStateToProps(state) {
  return {
    pages: state.pages
  }
}

export default connect(mapStateToProps)(PageList);

Answer 2

Возможно, state.pages изначально не определен, потому что начальное состояние редуктора не имеет страниц, заданных как [];

Установка initialState = {pages: []} в редукторе может решить эту проблему;

Answer 3

Что вы получаете, когда печатаете свой ответ?

then(response => { console.log(response)}