發出GET和POST請求的正確方法

我希望能夠撰寫評論并顯示所有書面評論（由于頁面尚未構建，目前沒有）。這是我第一次做這樣的專案，我無法讓它作業。

應用程式.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將充當我的服務器，我使用的是 localhost。我不會使用 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}`);
});

新評論.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>
    )
}

uj5u.com熱心網友回復：

WebbH評論說我不需要將我的前端檔案匯入我的服務器。因此，我洗掉了服務器中嘗試匯入它的部分，這解決了我的問題。

標籤：javascript 反应 邮政 得到

上一篇：我使用了POST方法，但是沒有GET的映射

下一篇：嘗試在phpfatfreeframework和mysql中插入帶有外鍵的記錄時出現問題