如何使用useState在React中发布API

如何解决如何使用useState在React中发布API

我正在使用Material-UI开发Mern-stack应用程序。我有一个事件模型，一个事件有很多评论。我现在面临的挑战是如何用functional-based component在EVent上发表评论。我以前曾使用基于类的组件进行此工作，但现在我决定将代码更改为使用基于函数的组件，但我不知道该如何实现。我在控制台中遇到的错误是404 not 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>

）; }

解决方法

问题不是来自useState，而是致电

axios.post(
  "http://localhost:9000/events/" + props.match.params.id,setEventComment
)

您收到的错误是网址

“ http：// localhost：9000 / events /” + props.match.params.id

不存在。我不知道您应该如何发送ID

“ http：// localhost：9000 / events？id =” + props.match.params.id

或其他东西，但这就是您的日志所要解决的问题：

在浏览器控制台中

。 xhr.js：178 POST http：// localhost：9000 / events / 5f35e9c686c3a9132b5067b9 404（未找到）错误：请求失败，状态码为404