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: []}可能会解决此问题；

填充React组件会导致“ TypeError：无法读取未定义的属性'map'”

3 个答案: