在 MERN 中显示数据时出现问题。我的列表显示所有数据，并且应该只显示带有 ID 的数据

Question

我正在尝试为学校项目构建一个迷你论坛。

我试图实现，当我点击在这种情况下在“标题：测试帖子 1”下的链接时，我想发布帖子并且只显示具有相同 ID 的数据。

当您单击指向 id 的链接时，路由正在工作，它只显示所有数据。

我遇到了数据问题，它显示的是所有“帖子”，而不是具有匹配 ID 的帖子。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

const Post = props => (
    <tr>
        <td>{props.post.post_vote}</td>
        <td>{props.post.post_title}</td>
        <td>{props.post.post_question}</td>
        <td>{props.post.post_name}</td>
        <td>{props.post._id}</td>
    </tr>
)

export default class ThePost extends Component {

    constructor(props) {
        super(props);
        this.state = {
            posts: []
        };
    }

    componentDidMount() {
        axios.get('http://localhost:8000/posts/')
            .then(response => {
                this.setState({posts: response.data})
            })
            .catch(function (error) {
                console.log(error);
            })
    }

    postPost() {
        return this.state.posts.map(function(currentPost, i) {
            return <Post post={currentPost} key={i} />;
        });
    }

    render() {
        return (
            <div>
                <h3>Question:</h3>
                <table className="table table-striped" style={{ marginTop: 20 }}>
                    <thead>
                        <tr>
                            <th>Votes</th>
                            <th>Title</th>
                            <th>Question</th>
                            <th>Name</th>
                            <th>Id:</th>
                        </tr>
                    </thead>
                    <tbody>
                        { this.postPost() }
                    </tbody>
                </table>
                <Link to="/"><button className="btn btn-primary">Back to posts</button></Link>
            </div>
        )
    }
}

我的 app.js

<Switch>
   <Route path="/" exact component={PostsList} />
   <Route path="/create" component={CreatePost} />
   <Route path="/posts/:id" component={ThePost} />
   <Route path="/edit/:id" component={EditPost} />
</Switch>

我的后台

postRoutes.route('/posts/:id').get(function(req, res) {
    let id = req.params.id
    Post.findById(id, function(err, post) {
        res.json(post);
    });
});

我认为问题在这里，但我不确定。

 postPost() {
        return this.state.posts.map(function(currentPost, i) {
            return <Post post={currentPost} key={i} />;
        });
    }

谁能帮帮我？

Answer 1

带有http请求的get方法需要有id参数，

   componentDidMount() {
    axios.get('http://localhost:8000/posts/'+this.props.match.params.id)
        .then(response => {
            this.setState({posts: response.data})
        })
        .catch(function (error) {
            console.log(error);
        })
}