Question

我想创建一个帖子，并将该帖子呈现在索引页面的列表中。当我进入索引页面时，我按“添加帖子”按钮，这会将我定向到/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();

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。

Material-UI列表未渲染？

1 个答案: