如何在 ReactJS 中显示餐厅的相关项目

Question

我想在点击按钮时在新页面上显示与餐厅相关的项目。

This is how the home page looks when displaying the restaurant component.

This is the directory of my components.

This is how the data is stored for a restaurant

在这个 Restaurant.js 中，我想将它链接到按钮行代码所在的“/restaurantdetails”。但是我如何传递餐厅信息？我应该重新安排任何文件吗？请提供一些最佳方法的指导

import React from "react";
import useStyles from "./styles";
import { Card, CardActions, CardContent, CardMedia, Button, Typography } from "@material-ui/core";

import ThumbUpAltIcon from "@material-ui/icons/ThumbUpAlt";
import DeleteIcon from "@material-ui/icons/Delete";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import moment from "moment";
import { Link } from "react-router-dom";

const Restaurant = ({ restaurant, setCurrentId }) => {
  // Style classes
  const classes = useStyles();

  return (
    // Card Class
    <Card className={classes.card}>
      {/* Restaurant Image*/}
      <CardMedia className={classes.media} image={restaurant.image} title={restaurant.title} />

      {/* Overlay restaurant name with Button for Restaurant details*/}
      <div className={classes.overlay}>
         {/*I WANT TO LINK TO RESTAURANTDETAILS TO DISPLAY THE ITEMS BUT HOW? */}
        <Button component={Link} to="/restaurantdetails:" variant="contained">
          <Typography variant="h6">{restaurant.name}</Typography>
        </Button>

        {/* <Typography variant="body2">{restaurant.description}</Typography> */}
      </div>

      {/* Edit Restaurant Button */}
      <div className={classes.overlay2}>
        <Button
          style={{ color: "white" }}
          size="small"
          onClick={() => setCurrentId(restaurant._id)}
        >
          <MoreHorizIcon fontSize="default" />
        </Button>
      </div>

      {/* Tags maybe add */}
      <div className={classes.details}>
        <Typography variant="body2" color="textSecondary" component="h2">
          tags maybe
        </Typography>
      </div>
      {/* Description of Restaurant */}
      <Typography className={classes.title} gutterBottom variant="h5" component="h2">
        {restaurant.description}
      </Typography>

      {/* Details of Restaurant */}
      <CardContent>
        <Typography variant="body2" color="textSecondary" component="p">
          {restaurant.city}, {restaurant.street}
        </Typography>
      </CardContent>

      <CardActions className={classes.cardActions}>
        {/* Like */}
        <Button size="small" color="primary" onClick={() => {}}>
          <ThumbUpAltIcon fontSize="small" />
          Like
        </Button>
        {/* Delete */}
        <Button size="small" color="secondary" onClick={() => {}}>
          <DeleteIcon fontSize="small" />
          Delete
        </Button>
      </CardActions>
    </Card>
  );
};

export default Restaurant;

Answer 1

我会使用 URL 将 ID 传递给 through。

<Link to={`/restaurantDetails/${restaurant.id}`}>Show details</Link>

RestaurantDetails 路由/组件然后可以从 URL 中读取此参数并从 API 中获取该餐厅的数据。

function RestaurantDetails() {
  let { id } = useParams();

  const [restaurantInfo, setRestaurantInfo] = useState();

  useEffect(() => {
    fetch(`/api/restaurantInfo/${id}`)
      .then(res => res.json())
      .then(data => setRestaurantInfo(data));
  }, [])

  return (
    <div>
      <h2>Restaurant id is: {id}</h2>
    </div>
  );
}

链接：useParams、template literals

Answer 2

1. 让你的路线像这样 '/restaurantDetails/:id

2. 在餐厅页面按钮更新按钮使用上面的链接。

   <div className={classes.overlay}>
     {/*I WANT TO LINK TO RESTAURANTDETAILS TO DISPLAY THE ITEMS BUT HOW? */}
     <Button component={Link} to=`/restaurantdetails/${restaurant.id}` variant="contained">
       <Typography variant="h6">{restaurant.name}</Typography>
     </Button>
   
     {/* <Typography variant="body2">{restaurant.description}</Typography> */}
   </div>
   

3. 如果您将餐厅的全部数据存储在 redux 存储中。在您的 redux 存储状态中创建一个属性为 activeRestaurant = {} 现在创建一个 reducer 逻辑和操作来从存储的餐厅数据中找到餐厅，并将找到的餐厅设置为 activeRestaurant。

4. 在餐厅详情页面

   function RestaurantDetails() {
     const selectedId = props.match.params.id;
     const activeRestaurant = useSelector(state => state.activeRestaurant); // fetch reducer state
   
     useEffect(() => {
       if(selectedId) {
         dispatch(findRestaurant(selectedId)) // redux action
       }
     , [selectedId])
   
    return <h1>{activeRestaurant.name}</h1>
   }
   

附：如果你没有在 redux 中存储餐厅数据。您可以使用 api 请求来获取数据。您只需要将dispatch(findRestaurant(selectedId)) 替换为您的api 请求函数。