使用JSON Server更新数组时PUT请求返回404 Not Found问题排查

问题原因 #

JSON Server遵循RESTful路由规则，默认不支持直接对集合路径（如/dailyItems）发送PUT请求。它的PUT端点仅针对单个资源（格式为/dailyItems/:id），用于更新某一条具体的条目。直接对集合发送PUT请求会触发404，因为该端点不存在。你的GET、POST请求正常是因为这两个方法在集合路径上是合法的（GET获取整个集合，POST新增条目）。

解决建议 #

方案1：逐个更新单个资源（推荐） #

遍历更新后的数组，对每个条目单独发送PUT请求到对应id的端点，这是JSON Server原生支持的标准方式：

const handleSubmit = async () => {
    try {
      const updatedDailyItems = dailyItems.map(item => ({ ...item, isVisible: !!item.checked }));
      const updatedMonthlyItems = monthlyItems.map(item => ({ ...item, isVisible: !!item.checked }));

      // 并行处理所有dailyItems的更新请求
      await Promise.all(updatedDailyItems.map(item => 
        axios.put(`http://localhost:3000/dailyItems/${item.id}`, item)
      ));
      // 并行处理所有monthlyItems的更新请求
      await Promise.all(updatedMonthlyItems.map(item => 
        axios.put(`http://localhost:3000/monthlyItems/${item.id}`, item)
      ));

      navigate('/');
    } catch (error) {
      console.error('Error updating lists:', error);
    }
};

方案2：替换整个集合（可选） #

如果你需要一次性替换整个dailyItems数组，可以尝试发送PUT请求到集合路径，但需要满足两个前提：

1. 确保请求体是完整的数组，且每个元素包含唯一的id字段（和原集合的id规则一致）
2. 确认你的JSON Server版本支持该操作（大部分新版本都支持）

修改后的请求代码和原来一致，但如果仍然返回404，检查你的JSON Server启动命令是否正确（需确保用json-server --watch db.json启动，且db.json的结构无误）。

注意：这种方式会完全替换掉原集合中的所有数据，风险较高，仅适合需要全量替换的场景。

额外检查项 #

• 确认JSON Server的监听端口是3000，和请求URL中的端口一致
• 用Thunder Client测试单个资源的PUT请求（如PUT http://localhost:3000/dailyItems/1，请求体为该条目的更新数据），验证是否能正常响应

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