Reactjs 材质UI列表不呈现？

我想创建一篇文章，并将其呈现在索引页的列表中。当我在索引页面上时，我按下“添加帖子”按钮，这将引导我进入

/posts/new

路线。然后我在输入字段中输入并提交帖子。已成功创建帖子，但列表未呈现在索引页中。我也没有收到任何错误。PostsIndex组件的renderPosts方法正确吗？请给我指出正确的方向。谢谢大家!

网络

根索引

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

从“react-dom”导入ReactDOM；
导入“/index.css”；
从“/containers/PostsIndex”导入PostsIndex；
从“/containers/PostsNew”导入PostsNew；
从“/containers/PostsShow”导入PostsShow；
将*作为serviceWorker从“/serviceWorker”导入；
从“react router dom”导入{Route，BrowserRouter，Switch}；
从“react redux”导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“/reducers”导入减速机；
从“redux承诺”导入承诺；
const createStoreWithMiddleware=applyMiddleware（promise）（createStore）；
ReactDOM.render(
,
document.getElementById（“根”）
);
serviceWorker.unregister（）；

应用程序

import React，{Component}来自'React'；
从“@material ui/core/styles/MuiThemeProvider”导入MuiThemeProvider；
从“/containers/PostsIndex”导入PostsIndex；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

职位索引

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

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“./actions/index”导入{fetchPosts}；
从“redux”导入{bindActionCreators}；
从'react router dom'导入{Link}；
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemText”导入ListItemText；
从“洛达斯”进口；
类PostsIndex扩展组件{
componentDidMount（）{
this.props.fetchPosts（）；
}
renderPosts=（）=>{
return>map（this.props.post，post=>{
返回(
);
});
};
render（）{
返回(
关于它的博客
添加帖子
{this.renderPosts（）}
);
}
}
函数MapStateTops（状态）{
返回{
职位：state.posts
};
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{fetchPosts}，dispatch）；
}
导出默认连接(
MapStateTops，
mapDispatchToProps
)（PostsIndex）；

我无法发表评论，所以只能试着回答

---

renderPosts

使用

this.props.post

，但它看起来应该是

this.props.posts

，正如您的

MapStateTrops

方法所定义的那样。

好眼力！非常感谢。

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