基于 ID 使用 Fetch API 更新数据库中的 JSON 数据

import { useNavigate } from 'react-router-dom';

function addLoggbokHandler(loggbokData) {
  const history = useNavigate(); // 用于页面导航或刷新
  fetch(
    "api/objects.json", // 目标API端点
    {
      method: "POST", // 指定为POST方法
      body: JSON.stringify(loggbokData), // 将JavaScript对象转换为JSON字符串作为请求体
      headers: {
        "Content-Type": "application/json" // 告知服务器请求体是JSON格式
      }
    }
  ).then(() => {
    history(0); // 请求成功后刷新当前页面或进行其他操作
  });
}

import { useState, useEffect } from 'react';

function LoggboksList() {
  const [isLoading, setIsLoading] = useState(true);
  const [loadedLoggboks, setLoadedLoggboks] = useState([]);

  useEffect(() => {
    setIsLoading(true);
    fetch(
      "api/objects.json", // 目标API端点
    ).then(response => {
      // 检查响应是否成功，并解析JSON
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    }).then(data => {
      const loggboks = [];
      // 将返回的数据转换为数组格式
      for (const key in data) {
        const loggbok = {
          id: key,
          ...data[key]
        };
        loggboks.push(loggbok);
      }
      setIsLoading(false);
      setLoadedLoggboks(loggboks); // 更新状态以渲染数据
    }).catch(error => {
      console.error("Error fetching data:", error);
      setIsLoading(false);
      // 处理错误，例如显示错误消息
    });
  }, []); // 空依赖数组表示只在组件挂载时运行一次

  if (isLoading) {
    return <p>Loading loggboks...</p>;
  }

  // ... 渲染 loadedLoggboks 的逻辑
}

function updatebokHandler(id, loggbokData) {
  fetch(
    `api/objects/${id}.json`, // 动态构建URL，包含要更新的资源ID
    {
      method: "PUT", // 指定为PUT方法
      body: JSON.stringify(loggbokData), // 将更新后的数据转换为JSON字符串
      headers: {
        "Content-Type": "application/json" // 告知服务器请求体是JSON格式
      }
    }
  ).then(response => {
    if (!response.ok) {
      // 处理非2xx响应，例如服务器错误
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 根据需要处理成功响应，例如刷新数据、显示成功消息
    console.log(`Loggbok with ID ${id} updated successfully.`);
    // 可以在这里重新获取数据或局部更新前端状态
  }).catch(error => {
    console.error("Error updating loggbok:", error);
    // 处理网络错误或JSON解析错误
  });
}