如何在Reactjs中使用useEffect获取具有ID的url

问题描述

我正在处理Mernstack应用程序，在我的应用程序中，我具有Event Model，并且单击事件作为链接时想显示一个事件。 我现在面临的挑战是如何使用useEffect加载单个事件API。当我使用componentDidMount时它可以工作，但是现在我将应用程序更改为使用useEffect。通过ComponentDidMount，我使用this.props.match.params.id来获取ID，但是现在我正在使用useEffect，我不知道如何获取ID，这样我就可以显示单个事件及其相关的详细信息和注释。

import React,{ useState,useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import AddComingWithModal from "../components/coming-with-modal.component";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Collapse from "@material-ui/core/Collapse";
import Avatar from "@material-ui/core/Avatar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import { red } from "@material-ui/core/colors";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import { useTheme } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";

export default function EventAndComments() {
  const theme = useTheme();
  const [tileData,setTileData] = useState([]);

  const useStyles = makeStyles((theme) => ({
   root: {
    maxWidth: 345,},media: {
    height: 0,paddingTop: "56.25%",// 16:9
  },expand: {
    transform: "rotate(0deg)",marginLeft: "auto",transition: theme.transitions.create("transform",{
      duration: theme.transitions.duration.shortest,}),expandOpen: {
    transform: "rotate(180deg)",avatar: {
    backgroundColor: red[500],}));

const classes = useStyles();
const [expanded,setExpanded] = React.useState(false);

const handleExpandClick = () => {
  setExpanded(!expanded);
};

useEffect((id) => {
  axios
   .get(
     "http://localhost:9000/events/" +
       this.props.match.params.id +
       "/eventcomments"
    )
    .then((response) => {
      setTileData([...response.data]);
    })
    .catch(function (error) {
      console.log(error);
    });
},[]);

return (
  <Card className={classes.root}>
    <CardHeader
      avatar={
        <Avatar aria-label="recipe" className={classes.avatar}>
          R
        </Avatar>
      }
      action={
        <IconButton aria-label="settings">
          <MoreVertIcon />
        </IconButton>
      }
      title={tileData.title}
      subheader="September 14,2016"
    />
    <CardMedia
      className={classes.media}
      image="/static/images/cards/paella.jpg"
      title="Paella dish"
    />
    <CardContent>
      <Typography variant="body2" color="textSecondary" component="p">
        This impressive paella is a perfect party dish and a fun meal to cook
        together with your guests. Add 1 cup of frozen peas along with the
        mussels,if you like.
      </Typography>
    </CardContent>
    <CardActions disableSpacing>
      <IconButton aria-label="add to favorites">
       <FavoriteIcon />
      </IconButton>
      <IconButton aria-label="share">
        <ShareIcon />
      </IconButton>
      <IconButton
        className={clsx(classes.expand,{
          [classes.expandOpen]: expanded,})}
        onClick={handleExpandClick}
        aria-expanded={expanded}
        aria-label="show more"
      >
        <ExpandMoreIcon />
      </IconButton>
    </CardActions>
    <Collapse in={expanded} timeout="auto" unmountOnExit>
      <CardContent>
        <Typography paragraph>Method:</Typography>
        <Typography paragraph>
          Heat 1/2 cup of the broth in a pot until simmering,add saffron and
          set aside for 10 minutes.
        </Typography>
        <Typography paragraph>
          Heat oil in a (14- to 16-inch) paella pan or a large,deep skillet
        </Typography>
        <Typography paragraph>
          Add rice and stir very gently to distribute. Top with artichokes and
        </Typography>
        <Typography>
          Set aside off of the heat to let rest for 10 minutes,and then
          serve.
        </Typography>
      </CardContent>
    </Collapse>
  </Card>
);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）