MERN API 请求，不知道如何发出 put 请求并正确更新

Question

首先让我说我是 MERN 堆栈的新手。我一直在通过教程学习，但是有些概念没有很好地解释。

使用 GET 时，我调用 /users。但是根据教程，当我发布时，我必须发布到 /user/new。不知道为什么它从复数（用户）变为单数（用户）。这是对 express 的警告，还是我正在创建一条新路线？

我最大的问题是我不知道如何提交 PUT 请求...我无法更新对象中的任何信息。我也在尝试将信息添加到我的 Animal 模型中的子数组中。

我将提供我的 App.js、server.js 和 Model(Animal)，

SERVER.JS

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const twilio = require('twilio')

const app = express();

app.use(express.json());
app.use(cors());

mongoose.connect('mongodb://127.0.0.1:27017/newtable', {
    useNewUrlParser: true, 
    useUnifiedTopology: true 
}).then(() => console.log("Connected to MongoDB")).catch(console.error);

app.listen(3008, () => console.log("Connected on Port 3008"));

const Animal = require('./models/Animals');

app.get('/animals', async(req, res) => {
    const animals = await Animal.find()
    res.json(animals)
})

app.post('/animals/new', (req, res) => {
    const animal = new Animal({
        phoneNumber: req.body.phoneNumber,
        textHistory: req.body.textHistory,
        name: req.body.name
    })
    animal.save()
    res.json(animal)
})

app.delete('/animal/delete/:id', async (req, res) => {
    const result = await Animal.findByIdAndDelete(req.params.id);
    res.json({result});
});

app.put('/animal/update/:id', async (req, res) => {
    const numba = await Animal.findOne(req.params.id);
    numba.phoneNumber = "gordage"
    numba.save();
    res.json(numba);
    console.log('asdfoij')
})

ANIMAL.JS（模型）

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const AnimalSchema = new Schema({
    phoneNumber: {
        type: String,
        required: false
    },
    textHistory: {
        type: String,
        required: false
    },
    name: {
        type: String,
        required: false
    }
});

const Animal = mongoose.model("Animal", AnimalSchema);

module.exports = Animal;

App.js

import React, {useState, useEffect} from "react"
import './App.css';


function App() {
  const api_base = "http://localhost:3008"
  const [animals, setAnimals] = useState([])

  const GetAnimals = () => {
    fetch(api_base + "/animals")
    .then(res => res.json())
    .then(data => setAnimals(data))
    .catch((err) => console.error("error", err));
    console.log(animals)
  }

  useEffect(() => {
    GetAnimals()
  }, [])

  const deleteAnimal = async id => {
        const data = await fetch(api_base + '/animal/delete/' + id, { method: "DELETE" }).then(res => res.json());
        setAnimals(animals => animals.filter(animal => animal._id !== data.result._id));
    console.log('working')
    }

  const addAnimal = async () => {
        const data = await fetch(api_base + "/animals/new", {
            method: "POST",
            headers: {
                "Content-Type": "application/json" 
            },
            body: JSON.stringify({
                phoneNumber: "9175028901",
        textHistory: "benson",
        name: "beni"
            })
        }).then(res => res.json());

        setAnimals([...animals, data]);
    console.log("clicking")
    }

  const changePhone = async id => {
    const data = await fetch(api_base + '/animal/phoneNumber/' + id).then(res => res.json());
    console.log("doing")
    
    setAnimals(animals => animals.map(animal => {
      if (animal._id === data._id) {
        animal.phoneNumber = "bensonhurst";
      }
      return animal;
    }));
    console.log("doing")
  }


  return (
    <div>
      <h1>Welcome to Beni's Table</h1>
      <table className="table">
        <thead>
          <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
            <th>Five</th>
          </tr>
        </thead>
      </table>
      <h1>Animal List</h1>
      
        {animals.map(animal => (
          <tbody>
            <td>{animal.name}</td>
            <td>{animal._id}</td>
            <td>{animal.phoneNumber}</td>
            <button onClick={() => changePhone(animal._id)}>Change Phone</button>
            <button onClick={() => deleteAnimal(animal._id)}>X</button>
          </tbody>
        ))}
      
      <button onClick={addAnimal}>add</button>
    </div>
  );
}

export default App;

Answer 1

如何从客户端提交 PUT 请求。我认为这是问题所在。您没有在 changePhone 方法的请求中指定方法 PUT 反应和快递端点是 /animal/update/:id 并且您正在调用 /animal/phoneNumber/。这就像与服务器通信，在请求选项中我们指定它们嘿“快速服务器”我想使用 PUT 方法所以请更新数据就像您在 POST 中指定的一样。还可以直观地了解 PUT 方法的作用会对您有所帮助。 （它会根据 id 通过覆盖它来更新现有数据，从而替换源的原始版本）

所以对两者的修复将是：

在 React 中获取 PUT 请求：

const requestOptions = {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: { Animal: 'The data you want to change the exisiting data with' }
};
fetch(`/animal/update/${id}`, requestOptions)
    .then(response => response.json())
    .then(data => console.log(data));

axios 中的 PUT 请求（基于 Promise 的 http 客户端）：

const res = await axios.put(`/animal/update/${id}`, { Animal: 'The data you want to change the exisiting data with' });

这是客户端的 Put 请求。现在让 Put 方法在服务器端更加清晰。请参考：https://thecodepixi.dev/blog/express-mongoose-crud-api/#updating-instances。