Проблема с отображением данных в MERN. Мой список отображает все данные и должен показывать только один с идентификатором - PullRequest
Новая
       9

Проблема с отображением данных в MERN. Мой список отображает все данные и должен показывать только один с идентификатором

0 голосов
/ 20 мая 2019

Я пытаюсь создать мини-форум для школьного проекта.

Я пытаюсь достичь, когда я нажимаю на ссылку, которая в данном случае находится в разделе «Название: Тестовый пост 1», я хочу перейти напубликовать и показывать только данные, которые имели тот же идентификатор.

Маршруты работают, когда вы нажимаете на ссылку, он идет на идентификатор, он просто показывает все данные.

У меня естьпроблема с данными, это показывает все "сообщения" вместо сообщения с соответствующим идентификатором.

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

My 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} />;
        });
    }

Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 20 мая 2019

метод get с запросом http должен иметь id param, 

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