发出 GET 和 POST 请求的正确方法

Question

我希望能够撰写评论并显示所有书面评论（目前还没有，因为页面尚未构建）。这是我第一次做这样的项目，但我无法让它工作。

App.js。我希望 const fetchReviews 获取并显示所有已撰写的评论，我希望 const postReview 简单地将新评论发布到页面。

import React, {useState, useEffect} from "react";

import { NewReview } from "./NewReview.js";
import { AllReviews } from "./AllReviews";

const reviewsURL = "http://localhost:8080/reviews"

export const App = () => {
  const [existingReviews, setExistingReviews] = useState([])
  const [newReview, setNewReview] = useState('')

  const fetchReviews = () => {
    fetch(reviewsURL)
    .then(response => response.json())
    .then((json) => {
      setExistingReviews(reviews)
    }).catch(error => {
      console.log(error.message)
    })
  }

  useEffect(() => {
    fetchReviews();
  }, []);


  const postReview = (event) => {
    event.preventDefault();

    fetch(reviewsURL, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({message: newReview})
    })
    .then (response => response.json())
    .then (() => {
      fetchReviews();
      setNewReview('')
    }).catch(error => {
      console.log(error.message)
    })
  }
  return (
    <>

<NewReview
      newReview={newReview}
      setNewReview={setNewReview}
      handlesubmit={postReview}
      />

{<AllReviews 
        allReviews={existingReviews} 
        />}
    </>
  )
}

Index.js 将充当我的服务器，我使用的是本地主机。我不会使用 mongo/mongoose。

在过去的两周里，我已经尝试了很多不同的事情，阅读了一堆关于 Stack 的问题和答案，我尝试了 import()、require()、更新 json 包，但我被卡住了。这让我想知道AllReviews 和NewReviews 的导入和使用是否接近正确？

请帮忙，我在这上面花了很多时间。

import express from 'express'

import { NewReview } from '../frontend/src/NewReview.js';
import { AllReviews } from '../frontend/src/AllReviews.js';

const PORT = process.env.PORT || 8080;
const app = express();

app.get("/", (request, response) => {
    response.json({ message: "Hello from server!" });
  });

// GET all reviews
app.get("/reviews", (request, response) => {
  response.status(201).json(AllReviews)
});

  //POST a new review
  app.post('/reviews', async (request, response) => {
    try {
      response.status(201).json(NewReview)
    } 
      catch (err) {
      response.status(400).json({ message: 'Sorry, could not save review to the database', errors: err.errors
      })
    }
  })



app.listen(PORT, () => {
  console.log(`Server listening on http://localhost:${PORT}`);
});

NewReview.js

import React from "react";

export const NewReview = ({newReview, setNewReview, handleSubmit}) => {
    return(
        <section className="newReviewContainer">
            <form onSubmit={handleSubmit}>
                <label>
                    <textarea
                    placeholder="Write your review here"
                    rows="3"
                    onChange={event => setNewReview(event.target.value)}
                    value={newReview}>
                    </textarea>
                </label>

                <button className="sendReview"
                type="submit">
                    <p>SEND REVIEW</p>
                </button>
            </form>
        </section>
    )
}

Answer 1

WebbH 评论说我不需要将前端文件导入我的服务器。所以我删除了服务器中我尝试导入它的部分，这解决了我的问题。