我正在开发一个带有Material-UI的Mern-stack应用程序。我有一个事件模型，一个事件有很多注释。我现在面临的挑战是如何用基于功能的组件对事件发布评论。我以前在使用基于类的组件时也做过这样的工作，但是现在我决定改变我的代码来使用基于函数的组件，但是我不知道如何实现这一点。我在控制台中得到的错误是404not found。如何设置useState以正确发送带有Axios的写入数据？

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";
import Grid from "@material-ui/core/Grid";
import moment from "moment";

import FilledInput from "@material-ui/core/FilledInput";
import FormControl from "@material-ui/core/FormControl";
import FormHelperText from "@material-ui/core/FormHelperText";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import OutlinedInput from "@material-ui/core/OutlinedInput";

export default function EventAndComments(props) {
 const url = props.location.pathname;
 const theme = useTheme();
 const [eventComments, setTileData] = useState([]);

 const useStyles = makeStyles((theme) => ({
   root: {
    maxWidth: 850,
   },
  media: {
   height: 0,

  paddingTop: "86%", // 16:9
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
},
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(() => {
  axios
   .get(
     "http://localhost:9000/events/" +
       props.match.params.id +
       "/eventcomments"
   )
  .then((response) => {
    setTileData(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });
}, []);

const nowIso = new Date();
const getTitle = (startDateTs, endDateTs) => {
 const now = Date.parse(nowIso);

 if (endDateTs <= now) {
  return "Started:" + " " + moment(startDateTs).format("LLLL");
}

if (startDateTs < now && endDateTs > now) {
  return "Live:" + " " + moment(startDateTs).format("LLLL");
}

 return "Starting:" + " " + moment(startDateTs).format("LLLL");
};

const getEnded = (startDateTs, endDateTs) => {
  const now = Date.parse(nowIso);

 if (endDateTs <= now) {
   return "Ended:" + " " + moment(startDateTs).format("LLLL");
 }

if (startDateTs < now && endDateTs > now) {
  return "Will End:" + " " + moment(startDateTs).format("LLLL");
 }

  return "Ends:" + " " + moment(startDateTs).format("LLLL");
};

const [setEventComment, setName] = React.useState("");

const handleChange = (event) => {
 setName({ ...setEventComment, [event.target.name]: event.target.value 
 });
};

const onSubmit = (e) => {
  e.preventDefault();
  axios
    .post(
      "http://localhost:9000/events/" + props.match.params.id,
      setEventComment
    )
    .then(function (response) {
     console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
 };

return (
<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: "100vh" }}
>
  <Card className={classes.root}>
    <h3
      style={{
        background: "   #800000",
        color: "white",
        textAlign: "center",
      }}
      className={classes.cardheader}
    >
      {eventComments.title}
    </h3>
    <CardHeader
      avatar={
        <Avatar aria-label="recipe" className={classes.avatar}>
          CB
        </Avatar>
      }
      action={
        <IconButton aria-label="settings">
          <MoreVertIcon />
        </IconButton>
      }
      title={getTitle(
        Date.parse(eventComments.startingDate),
        Date.parse(eventComments.closingDate)
      )}
      subheader={getEnded(
        Date.parse(eventComments.startingDate),
        Date.parse(eventComments.closingDate)
      )}
      style={{ background: "#DCDCDC" }}
    />
    <CardMedia
      className={classes.media}
      image={eventComments.eventImage}
      title="Paella dish"
    />
    <CardContent>
      <Typography variant="body2" color="textSecondary" component="p">
        {eventComments.description}
      </Typography>
    </CardContent>
  </Card>
  <form
    className={classes.root}
    noValidate
    autoComplete="off"
    onSubmit={onSubmit}
  >
    <FormControl>
      <InputLabel htmlFor="component-simple">Name</InputLabel>
      <Input
        id="component-simple"
        value={setEventComment.name}
        onChange={handleChange}
      />
    </FormControl>

    <FormControl variant="outlined">
      <InputLabel htmlFor="component-outlined">Name</InputLabel>
      <OutlinedInput
        id="component-outlined"
        value={setEventComment.description}
        onChange={handleChange}
        label="Name"
      />
    </FormControl>
    <input
      type="submit"
      className="btn btn-outline-warning btn-block mt-4"
    />
  </form>
</Grid>

）；}