反应 - mapStateToProps - “状态未定义”

Question

我有以下问题：使用下面的代码出现错误：

this.props.posts 未定义

当我按照教程https://codeburst.io/redux-a-crud-example-abb834d763c9进行操作时，我输入的所有内容都是正确的，在我的 React 职业生涯开始时，我已经完全困惑了。 请你帮助我好吗？

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);

Answer 1

非常感谢您的努力！

以下是 postReducer：

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'));

Answer 2

您需要声明一个初始状态。 所以你的this.props.posts不会是undefined 。

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;

第二个错误位于您的mapStateToProps方法中。 您需要访问posts redux 状态密钥。 posts: 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);