Блог

Я создаю простое приложение MERN, в котором пользователи оставляют отзывы о кафе. Я бы хотел, чтобы пользователи могли нажать на название кафе и перейти на страницу, где показаны все отзывы об этом конкретном кафе.
Для этого мне нужно отфильтровать отзывы и вернуть только отзывы, относящиеся к конкретному кафе. Итак, как мне присвоить документам для проверки из одного и того же кафе общий идентификатор? Или я неправильно подхожу к этому? Мне удалось найти обзоры, основанные на названии кафе, но я чувствую, что это плохая практика.

Просмотрите маршрут и модель публикации

 app.post('/api/add-review',(req,res) => {
    const review = new Review(req.body)
    review.save()
    .then(() => {
        console.log('review successfully posted')
        res.status(200)
    })
    .catch(err => {
        console.log(err)
    })
})
 

 const mongoose = require('mongoose')
const Schema = mongoose.Schema

const reviewSchema = new Schema({
    userName:String,
    stars:String,
    title:String,
    photo:String,
    blurb:String,
    cafe:String
}, {timestamps:true})

const Review = mongoose.model('reviews', reviewSchema)

module.exports = Review
 

Кафе ПОЛУЧАЕТ маршрут и модель

 app.get('/api/all-cafes', (req,res) => {
    Cafe.find()
    .then((result) => {
        res.send(result)
    })
    .catch(err => {
        console.log(err)
    })
})
 

 const mongoose = require('mongoose')
const Schema = mongoose.Schema

const cafeSchema = new Schema({
    cafeName:String,
    photoURL:String,
}, {timestamps:true})

const Cafe = mongoose.model('cafes', cafeSchema)

module.exports = Cafe
 

Вот компонент, который отображает список кафе, где я хочу, чтобы пользователи могли нажимать на кафе и переходить к отзывам о кафе.

 import React, {useState, useEffect} from 'react'
import axios from 'axios'
import Cafe from './Cafe'

const CafeList = () => {
    const [cafes, setCafe] = useState([])

    useEffect(() => {
        axios.get('/api/all-cafes')
        .then(cafe => {
            setCafe(cafe.data)
        })
        .catch(err => {
            console.log(err)
        })
    },[])

    return(
            <div className = 'cafe-container-container'>
                <h2>Cafes</h2>
                <Cafe cafes = {cafes}/>
            </div>

    )
}

export default CafeList
 

 import React from 'react'
import {Link} from 'react-router-dom'

const Cafe = (props) => {
    const {cafes} = props
    return(
        <div>
            {
                cafes.map(cafe =>{
                    const {cafeName,photoURL} = cafe
                    
                    return (
                    <Link to = {`/cafe-reviews/${cafeName}`} style={{ textDecoration: 'none' }} >
                        <div className = 'cafe-container'>
                            <h2>{cafeName}</h2>
                            <img src = {photoURL}></img>
                        </div>
                    </Link>
                    )
                })
            }
        </div>
    )
}

export default Cafe
 

Я думаю, что ваш подход хорош. но вы должны добавить свойство cafe следующим образом

 const reviewSchema = new Schema({
    userName:String,
    stars:String,
    title:String,
    photo:String,
    blurb:String,
    cafe:{
        type: mongoose.Schema.Types.ObjectId,
        required: true,
        ref: 'Cafe'
    }
}, {timestamps:true});
```
and add this in you cafeSchema
```
cafeSchema.virtual('reviews', {
    ref: 'Review',
    localField: '_id',
    foreignField: 'cafe'
});
```
Using in this way has several benefits like if you are accessing any review you do not need to go back and fetch info about its cafe there will be whole cafe object not only id..there is som other things you can explore about it