javascript - React 和 Redux this.props.posts 未定义？

Question

我尝试遵循像使用 React 和 Redux 的博客这样的教程，但在 PostList 中，我在 reducer 的绑定(bind)中出现错误，只是我想渲染函数 renderPost使用posts

的 map调用reducer对象

我的代码有什么错误？

这是我的组件PostList:

import React from 'react';
import {connect } from 'react-redux';
import {cargaPost} from '../acciones/index';
import {Link} from 'react-router-dom';
class ListaPost extends React.Component {
    componentWillMount() {
        this.props.fetchPost();
    }
    renderPost () {
        return this.props.posts.map( post => {
            <li className="list-group-item" key={post.id}>
                <span className="text-right">{post.categories}</span>
            </li>
        })
    }
    render() { 
        // const { posts } = this.props;
        // if (!posts) {
        //   return <div>Loading...</div>
        // }
        return (
            <div>
                <div className="text-right">
                    <Link
                    to="/posts/new" 
                    >
                    <button 
                    type="button" 
                    className="btn btn-info">
                    Nuevo Post
                    </button>

                    </Link>
                </div>

                <ul className="list-group">
                    {this.renderPost()}
                </ul>
            </div>
        )
    }
}
function mapStateToProps(state) {
  return { posts: state.todos }
}
export default connect(mapStateToProps, {fetchPost: cargaPost})(ListaPost);

和我的reducerPosts

import {FETCH_POST} from '../acciones/index';

const estadoInicial = { todos:[], unPost: null }
// PostReducer
export default function(state=estadoInicial, accion) {
    switch(accion.type) {
        case FETCH_POST:
            return {...state, todos: accion.payload.data }
        default:
            return state;
    }
}

我的索引文件

import {combineReducers} from 'redux';
import PostReducer from './PostReducer';

const rootReducer = combineReducers({
    posts: PostReducer
});

export default rootReducer;

Answer 1

在您的 mapStateToProps 中，而不是 state.todos 中，它应该是 state.posts.todos。参见下面的代码:

function mapStateToProps(state) {
    return { posts: state.posts.todos }
}

在这里，您的 rootReducer 将返回商店的 state ，其中包含关键的 posts (这适用于您组合到根 reducer 中的所有 reducer )，并且在 posts 你有你的todos。