Reactjs 如何链接mongo数据库中的两个项目？

我正在构建一个简单的MERN stack应用程序，用户可以在其中提交关于咖啡馆的评论

我想要一个功能，用户可以点击一个咖啡馆的名称，从而重定向到一个关于该咖啡馆的所有评论的视图-有什么建议我可以做到这一点吗

Mongo Atlas数据库结构

Database
|
+--cafes (collection)
      +-- _id:5ffb7a6bf32d1b27ac8474d9
          cafeName:"Customs Coffee
          photoURL:"https://*******
+--reviews (collection)
      +--_id:5ffb95b75624dd13d825ea5e
          userName:"Josh"
          stars:"4"
           title:"Second review of customs coffee"
          photo:"photoURL.com"
          blurb: "this is the blurb for the second review of customs"
          cafe:"Customs Coffee"
          createdAt:2021-01-11T00:03:03.842+00:00

咖啡馆组件呈现列表

CafeList.jsx

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/' style={{ textDecoration: 'none' }} >
                        <div className = 'cafe-container'>
                            <h2>{cafeName}</h2>
                            <img src = {photoURL}></img>
                        </div>
                    </Link>
                    )
                })
            }
        </div>
    )
}

export default Cafe

…这是一个空的组件，我最终想要呈现特定咖啡馆的评论：

import react from 'react'

const CafeReviews = () => {
    return(
        <div>
            This is the cafe review list
        </div>
    )
}

export default CafeReviews

---

一、 就我个人而言，我会在你的评论集中添加一个咖啡馆引用，而不仅仅是一个公共字段，比如咖啡馆名称。如果您使用mongoose来定义mongo模式，这将是您的评论集合中的cafe引用字段的一个示例

    _id: mongoose.Schema.Types.ObjectId,
    userName: {Type: String, required: true},    
    cafeReference: {
      type: mongoose.Schema.Types.ObjectId,
      ref: 'Cafe',
      required: true,
    },
    ... etc (your other collection fields)

然后，在后端创建一个API端点，该端点通过cafe Id获取cafe评论。然后，在呈现cafe视图组件时，您将使用请求负载中的cafe Id发送GET请求。最后，Mongo“find”方法接受参数，通过这些参数可以查找请求的文档。链接文档-

在您的情况下，示例如下：

Review.find({cafeReference: cafeId}) 

mongoose还有一个很好的方法来组合来自两个集合（相当于sql连接）的字段，称为“填充”-。
还可以在componentDidMount生命周期方法中发出“通过咖啡馆id获取评论”请求。以下是如何在钩子中实现它-

希望这会有所帮助

Review.find({cafeReference: cafeId})