Reactjs 获取的数据无法到达组件

我试图使用React+Redux从API获取数据，但由于某种原因，数据无法呈现，即使我看到它来自控制台（使用Redux logger） 看起来出于某种原因，reducer并没有将areLoading值更改为false，数据也并没有到达页面。但我不知道我们的错误在哪里，一切似乎都是对的

组成部分：

class Posts extends Component {
    componentDidMount() {
        this.props.postsFetch();
    }
    render() {

        return (
            <div>

                {this.props.data.map(function(post, i) {
                    return (
                        <div className="tale" key={i}>
                            <p className="title" key={i}>{post.title}</p>
                        </div>
                    );
                })
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        data: state.posts,
        gotError: state.postsError,
        areLoading: state.postsLoading
    };
};

export default connect(mapStateToProps, { postsFetch })(Posts);

如果我将return语句更改为“return action.areLoading=false”，并且在该return action.data之后，一切正常。但这种解决方案似乎并不正确

行动：

export function postsError() {
    return {
        type: "POSTS_REQUEST_FAILURE",
    };
}

export function postsLoading() {
    return {
        type: "POSTS_REQUEST_LOADING",
        url: 'http://jsonplaceholder.typicode.com/posts/',
    };
}

export function posts(data) {
    return {
        type: "POSTS_REQUEST_SUCCESS",
        data
    };
}

export function postsFetch() {
    return function (dispatch) {
        dispatch(postsLoading());
    }
}

中间件：

export const apiCallMiddleware = store => next => action => {
    const { url, ...rest } = action;

    if (!url) return next(action)

    next({ type: "POSTS_REQUEST_LOADING" })

    axios(url)
        .then(response => {
            const data = response.data
            next({ type: "POSTS_REQUEST_SUCCESS", data })
        })
        .catch(err => {
            next({ ...rest, type: "POSTS_REQUEST_FAILURE" })
        })
}

next({ type: "POSTS_REQUEST_SUCCESS", data: data })

我在论坛上寻找解决方案，但似乎没有一个能帮到我。我也是新来的React+Redux，很抱歉有个新手问题

---

提前感谢。

您将

数据作为对象传递到
posts
操作中，当您执行
操作时，减速机无法识别
数据
键。数据
。我认为您必须在两个位置将
data
更改为
data:data

在中间件中：

export const apiCallMiddleware = store => next => action => {
    const { url, ...rest } = action;

    if (!url) return next(action)

    next({ type: "POSTS_REQUEST_LOADING" })

    axios(url)
        .then(response => {
            const data = response.data
            next({ type: "POSTS_REQUEST_SUCCESS", data })
        })
        .catch(err => {
            next({ ...rest, type: "POSTS_REQUEST_FAILURE" })
        })
}

next({ type: "POSTS_REQUEST_SUCCESS", data: data })

在
帖子中
操作：

export function posts(data) {
    return {
        type: "POSTS_REQUEST_SUCCESS",
        data: data                    //<---------
    };
}

我知道问题出在哪里了

这里

我得到了state.post对象的链接

改成

const mapStateToProps = (state) => {
    return {
        data: state.posts.items,
        gotError: state.posts.gotError,
        areLoading: state.posts.areLoading
    };
};

使其查看对象属性，而不是整个对象

谢谢你的帮助
 请尝试在MapStateTrops下记录您的状态，如console.log（state）并在return语句中使用确切的属性。我认为有一些问题

const mapStateToProps = (state) => {
    console.log(state);
    return {
        data: state.posts,
        gotError: state.postsError,
        areLoading: state.postsLoading
    };
};

虽然这个答案可能有些道理，但代码建议是错误的。这个问题使用ES6对象速记，它被解释为与您编写的代码完全相同的代码。原始代码是React中惯用的首选样式。我还没有发现代码的问题，但是这个更改应该没有效果。其他ES6功能的使用表明，对它的总体支持没有问题。您的CombineReducer功能中有什么？所有其他操作和减缩器是否按预期工作？为什么一个Ajax请求有三个减缩器？我曾尝试编写一个减缩器而不是三个，这没有什么区别。CombineReducer函数代码
导出默认的CombineReducer（{posts，postsError，postsLoading}）
和连接中间件的功能一起工作良好。
const mapStateToProps = (state) => {
    console.log(state);
    return {
        data: state.posts,
        gotError: state.postsError,
        areLoading: state.postsLoading
    };
};