填充react組件會導致“ TypeError：無法讀取未定義的屬性'map'”

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所在的容器組件中將狀態映射到props：

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

打印答復時您會得到什么？

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

Answer 2

我想您需要將reducer連接到PageList函數，因為它不知道什么是props.pages 。

您應該嘗試這樣的事情：

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

export default connect(mapStateToProps)(PageList);

Answer 3

最初可能未定義state.pages，因為reducer的初始狀態沒有將頁面設置為[]；

在reducer中設置initialState = {pages: []}可能會解決此問題；