TypeError：无法使用react-redux读取未定义i的属性'map'

Question

我遵循react-redux教程，并尝试显示帖子。我从https://jsonplaceholder.typicode.com/posts获取帖子数据。它返回如下响应：

import React from 'react';
import { connect } from 'react-redux';
import { fetchPost } from '../actions'

class PostList extends React.Component{
    componentDidMount(){
        this.props.fetchPost();
    }
    renderList(){
        return this.props.post.map(pos => {
            return (
                <div className="item" key={pos.id}>
                    <p>{pos.title}</p>
                </div>
            );
        });
    }
    render(){
        return(<div className="ui relaxed divided list"> {this.renderList()} </div>);
    }
}
const mapStateToProps = (state) =>{
    return { post:state.post}
}
export default connect(mapStateToProps , { fetchPost })(PostList);

这是我的动作创建者

import JsonPlaceHolder from '../apis/JsonPlaceHolder'
export const fetchPost = () => {
    return async (dispatch) => {
        const response = await JsonPlaceHolder.get('/posts');
        dispatch({
            type: 'FETCH_POST',
            payload:response
        });
    }
};

这是我的减速器

export default (state=[],action) => {
    switch(action.type){
        case "FETCH_POST":
            return action.payload;
        default:
            return state;
    }
};

这是我的../apis/JsonPlaceHolder文件

import axios from 'axios';

export default axios.create({
    baseURL:"https://jsonplaceholder.typicode.com/"
});

但是我收到这样的错误

  

TypeError：this.props.post.map不是函数

Answer 1

您必须从data中提取response。

dispatch({
  type: 'FETCH_POST',
  payload:response.data
});

Answer 2

我认为，在映射之前，您应该检查是否有this.props.post，因为请求需要一些时间，在此过程中，您可以从{{1} }。

此外，如果要映射undefined，则不仅应该返回this.props.post，还应该返回this.props.post作为有效载荷。否则，您将得到一个错误，表明该对象没有方法response。

Answer 3

您也可以从响应中提取数据

const mapStateToProps = (state) =>{
    return { post:state.post.data}
}