Javascript React-mapStateToProps-“反应”；“状态未定义”；

我有以下问题：使用下面的代码我得到错误：

此.props.posts未定义

当我在学习教程时，我键入了所有正确的内容，在我职业生涯的开始，我已经完全困惑了。你能帮帮我吗

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Post from './Post';

class AllPost extends Component {
    render() {
        return (
            <div>
                <h1>All Posts</h1>
                {this.props.posts.map((post) => <Post key={post.id} post={post} />)}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        posts: state,
    }
}

export default connect(mapStateToProps)(AllPost);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“./Post”导入Post；
类AllPost扩展组件{
render（）{
返回(
所有职位
{this.props.posts.map（（post）=>）}
);
}
}
常量mapStateToProps=（状态）=>{
返回{
职位：国家，
}
}
导出默认连接（MapStateTops）（AllPost）；

非常感谢您的努力

以下是后减速器：

const postReducer = (state = [], action) => {
    switch(action.type) {
        case 'ADD_POST':
            return state.concat([action.data]);
        default:
            return state;
    }
}

export default postReducer;

这里是index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import postReducer from './reducers/postReducer';

const store = createStore(postReducer);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“redux”导入{createStore}；
从'react redux'导入{Provider}；
从“./reducers/postReducer”导入postReducer；
常量存储=创建存储（postReducer）；
ReactDOM.render(
，document.getElementById（'root'）；

您需要声明初始状态。所以你的

this.props.posts

不会是

未定义的

const initialState = {
  posts: []
}

const postReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'ADD_POST':
            return { ...state, posts: [...state.posts, action.data]}
        default:
            return state;
    }
}

export default postReducer;

第二个错误位于

MapStateTops

方法中。您需要访问

posts

redux状态键<代码>帖子：state.posts就像我在下面做的那样

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Post from './Post';

class AllPost extends Component {
    render() {
        return (
            <div>
                <h1>All Posts</h1>
                {this.props.posts.map((post) => <Post key={post.id} post={post} />)}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        posts: state.posts, // you need to access to posts key
    }
}

export default connect(mapStateToProps)(AllPost);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“./Post”导入Post；
类AllPost扩展组件{
render（）{
返回(
所有职位
{this.props.posts.map（（post）=>）}
);
}
}
常量mapStateToProps=（状态）=>{
返回{
posts:state.posts，//您需要访问posts键
}
}
导出默认连接（MapStateTops）（AllPost）；

能否请您在

index.js

中发布您的减速机以及如何设置存储？谢谢是的，听起来你的

postsReducer

设置不正确，或者没有连接到商店。你准备好了吗？它可以帮助调试这些问题。您应该在reducer文件中声明初始状态。谢谢！现在，国家正在得到承认。但是我得到了另一个错误：this.props.posts.map不是一个函数：-（好的，你能

console.log（this.props.posts）

告诉我这个变量是什么类型的吗？我找出了错误的来源。我编辑了我的答案，你能告诉我它是否解决了你的问题吗？谢谢！！就是这样！我喜欢和专业人士一起工作。：-）妈的。错误刚刚转移：“TypeError:action.data不可编辑”