材料-用户界面列表没有渲染？

Question

我希望创建一个post，并将其呈现在索引页面的列表中。当我在索引页面上时，我按下'Add‘按钮，这将引导我到/posts/new路由。然后在输入字段中键入并提交post。正在成功创建帖子，但该列表不在索引页中呈现。我也不会犯任何错误。我的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();

应用程序

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，但它看起来像您的mapStateToProps方法定义的那样是this.props.posts。