无法从我的餐厅列表中访问每家餐厅的详细信息页面

Question

我有一份从 Firestore 中检索到的餐厅列表，单击餐厅名称后，我必须返回每个餐厅的详细信息页面。 在 ProductGrid 页面上，我已返回已存储在 firestore 中的所有餐厅，然后从每个餐厅名称中我应该转到 ProductDetail，其中将包含每个餐厅的详细信息（动态路由） 我已经创建了路线，但没有返回任何页面我无法弄清楚到底是什么问题！ 这是通往productDetail页面的链接

ProductGrid.js

      <h2> <Link to={`ecom-product-detail/${data.id}`}>{data.data.name_restaurant}</Link> </h2><<

ProductDetail.js

import { useParams } from "react-router-dom";

import { Link } from "react-router-dom";
import { firestore } from "../../../../../fire";

function ProductDetail(){

   const {productId}= useParams();
   const thisProduct = firestore.collection("Restaurants").doc().get.find((prod) => prod.id === productId);

return(

  
      <div className="col-12">
      <div className="card">
            <h1>{thisProduct.name_restaurant}</h1>
            <p> Price:${thisProduct.Currency}</p>
            <p> {thisProduct.email}          </p>
      </div>
      </div>
   
      
    ) ; }
    export default ProductDetail;

Route.js

    const Routes = () => {
    const routes = [
      { url: "ecom-product-detail/:productId", component: ProductDetail },
      ];
      return (
      <Fragment>
         <Switch>
            {routes.map((data, i) => (
               <Route
                  key={i}
                  exact
                  path={`/${data.url}`}
                  component={data.component}
               />
            ))}
         </Switch>

         {/* <Footer /> */}
      </Fragment>
   );
};

export default Routes;

这是我从 firestore 检索到的餐厅列表

这是我点击餐厅名称时呈现的页面

Answer 1

您应该在useEffect 挂钩内调用thisProduct，并将结果绑定到useState 挂钩。

类似这样的：

const {productId}= useParams();
const [thisProduct, setThisProduct] = useState({});
useEffect(() => {
const productDetails = firestore.collection("Restaurants").doc().get.find((prod) => prod.id === productId);
   setThisProduct(productDetails);
});