从API获取的修补程序数据

Question

我是一个初学者，正在尝试创建一个练习项目。我正在努力"；补丁"；从API获取的数据。我的json文件如下：

{
  "classes": [
    {
      "title": "Office Syndrome",
      "length": "60 Minutes",
      "instructor": "A. W.",
      "difficulty": "Intermediate",
      "description": "Suitable for people who are always constantly inactive working in front of computers.",
      "availableSpot": "10",
      "id": 1
    },
    {
      "title": "Digestive Flow",
      "length": "60 Minutes",
      "instructor": "MJ",
      "difficulty": "Beginners",
      "description": "Good for digestion",
      "availableSpot": "8",
      "id": 2
    }
]

我正在尝试创建一个可以预订课程的功能，每次预订后可用的Spot将减少1。

我的handleBook功能目前看起来是这样的：

const handleBook = (index) => {
    setSelectedYogaClass(true);
    if (selectedYogaClass === index) {
      fetch("http://localhost:8000/classes", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ availableSpot: data.availableSpot - 1 }),
      })
        .then((res) => {
          if (!res.ok) {
            throw Error("Sorry, something went wrong");
          }
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          setBookingError(err);
        });
    }
    console.log(selectedYogaClass);
    setModalIsOpen(false);
  };

这就是我如何调用函数

 <button
                    key={index}
                    onClick={() => handleBook(index)}
                    className="button button--outline"
                  >
                    Yes
                  </button>

然而，我得到了一个404错误，我想知道问题是什么？有人能指出我做错了什么吗？

提前感谢您！

Answer 1

当您使用多个路由(如http://localhost:8000/classes/:id(时，需要指定特定的资源。

如果要使用id 1更新(PATCH(class的availableSpot字段，则应使用http://localhost:8000/classes/1

的工作示例