如何使用fetch根据ID更新数据库中的指定JSON数据

1. 先确认后端接口支持 #

你需要后端提供按ID更新数据的接口，通常用PUT（全量替换目标对象）或PATCH（仅修改指定字段）方法，接口路径需包含目标数据的ID，比如 api/objects/{id}.json。

2. 编写前端更新函数 #

在你的组件中添加以下更新逻辑，复用现有的useNavigate和状态：

const history = useNavigate();

// 全量更新：替换整个数据对象
function updateLoggbok(id, updatedData) {
  fetch(`api/objects/${id}.json`, {
    method: "PUT",
    body: JSON.stringify(updatedData),
    headers: { "Content-Type": "application/json" }
  })
  .then(() => {
    // 更新完成后可选操作：刷新数据或跳转页面
    refreshLoggbokList();
    // 或者用history(0)刷新当前页，或跳转到列表页
    // history("/loggbok-list");
  })
  .catch(err => console.error("更新失败：", err));
}

// 部分更新：仅修改需要变更的字段
function patchLoggbok(id, partialData) {
  fetch(`api/objects/${id}.json`, {
    method: "PATCH",
    body: JSON.stringify(partialData),
    headers: { "Content-Type": "application/json" }
  })
  .then(() => refreshLoggbokList())
  .catch(err => console.error("部分更新失败：", err));
}

3. 复用数据获取逻辑刷新列表 #

把你现有的数据获取逻辑封装成函数，方便更新后调用刷新页面：

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

function refreshLoggbokList() {
  setIsLoading(true);
  fetch("api/objects.json")
    .then(res => res.json())
    .then(data => {
      const loggboks = Object.entries(data).map(([key, value]) => ({
        id: key,
        ...value
      }));
      setLoadedLoggboks(loggboks);
      setIsLoading(false);
    });
}

// 初始化加载数据
useEffect(() => {
  refreshLoggbokList();
}, []);

4. 调用更新函数的场景示例 #

比如在编辑表单提交时，或者点击按钮修改某个字段：

// 编辑表单提交时全量更新
function handleEditSubmit(id, formData) {
  updateLoggbok(id, formData);
}

// 点击按钮仅更新状态字段
function handleStatusChange(id, newStatus) {
  patchLoggbok(id, { status: newStatus });
}

优化：直接更新本地状态（避免重复请求） #

如果不想每次更新都重新拉取全量数据，可以直接修改本地状态：

// 在updateLoggbok的then回调里替换原有刷新逻辑：
setLoadedLoggboks(prev => prev.map(item => 
  item.id === id ? { ...item, ...updatedData } : item
));
setIsLoading(false);

内容的提问来源于stack exchange，提问作者BADRUM