Списки UI материалов не отображаются?

Question

Я хотел бы создать сообщение и отобразить его в списке на странице индекса.Когда я нахожусь на странице индекса, я нажимаю кнопку «Добавить сообщение», которая направит меня к маршруту /posts/new.Затем я ввожу в поля ввода и отправляю сообщение.Посты успешно создаются, но список не отображается на странице индекса.Я также не получаю никаких ошибок.Является ли мой метод renderPosts компонента PostsIndex правильным?Пожалуйста, укажите мне в правильном направлении.Спасибо!

СЕТЬ

ИНДЕКС КОРНЯ

import ReactDOM from "react-dom";
import "./index.css";
import PostsIndex from "./containers/PostsIndex";
import PostsNew from "./containers/PostsNew";
import PostsShow from './containers/PostsShow';
import * as serviceWorker from "./serviceWorker";
import { Route, BrowserRouter, Switch } from "react-router-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reducers from "./reducers";
import promise from "redux-promise";

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <BrowserRouter>
            <div>
                <Switch>
                    <Route path="/posts/new" component={PostsNew} />
                    <Route path="/posts/:id" component={PostsShow} />
                    <Route path="/" component={PostsIndex} />
                </Switch>
            </div>
        </BrowserRouter>
    </Provider>,
    document.getElementById("root")
);
serviceWorker.unregister();

APP

import React, { Component } from 'react';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import PostsIndex from './containers/PostsIndex';
import './App.css';

class App extends Component {
    render() {
        return (
            <MuiThemeProvider>
                <div>
                    <PostsIndex />
                </div>
            </MuiThemeProvider>
        );
    }
}

export default App;

ИНДЕКС ПОСТОВ

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchPosts } from "../actions/index";
import { bindActionCreators } from "redux";
import { Link } from 'react-router-dom';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import _ from "lodash";

class PostsIndex extends Component {
    componentDidMount() {
        this.props.fetchPosts();
    }

    renderPosts = () => {
        return _.map(this.props.post, post => {
            return (
                <Link to={`/posts/${post.id}`}>
                    <List>
                        <ListItem key={post.id}>
                            <ListItemText primary={post.title}/>
                        </ListItem>
                    </List>
                </Link>
            );
        });
    };

    render() {
        return (
            <div>
                <h1>Blog About It</h1>
                <Link to="/posts/new">Add Post</Link>
                <List>
                    <ul>{this.renderPosts()}</ul>
                </List>
            </div>
        );
    }
}

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

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchPosts }, dispatch);
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(PostsIndex);

Answer 1

Я не могу комментировать, поэтому я просто должен попытаться ответить,

renderPosts использует this.props.post, но похоже, что это this.props.posts, как определено вашим mapStateToProps методом.