React中Axios Put请求报404失效，Post/Delete请求正常求助

核心问题 #

你用前端数组的index作为URL路径参数，但后端的RESTful接口几乎都是通过todo的id来定位要更新的资源，而非前端的数组索引。这就导致请求路径找不到对应资源，返回404错误。

具体修正步骤 #

• 修改请求URL
  把URL里的index替换成todo的id（也就是你的todoId变量），代码调整如下：

  axios
    .put(
      `http://localhost:3000/todos/${todoId}`, // 用todoId替代index
      {
        id: todoId,
        title: todoTitle,
        completed: status,
      },
      { headers: { "Content-Type": "application/json" } }
    )
    .then(() => {
      // 优化状态更新方式，确保React能检测到变化
      const updatedTodoList = [...todoList];
      updatedTodoList[index].completed = status;
      setList(updatedTodoList);
    })
    .catch(function (error) {
      console.log(error);
    });
  

• 确认后端接口规则
  对比你正常工作的Delete请求URL，如果Delete是用/todos/${todoId}这种格式，那Put接口肯定也是遵循相同规则——用id定位资源，而非前端索引。

• 优化状态更新逻辑
  你原来直接修改数组元素再调用setList(todoList)的方式，可能不会触发组件重新渲染（因为React检测不到数组引用的变化）。改成创建新数组的方式，能确保状态更新生效。

为什么Post/Delete能正常运行？ #

• Post是创建新资源，请求路径一般是/todos，不需要定位已有资源，所以不会有路径匹配问题。
• Delete如果是用/todos/${todoId}的格式，和后端资源定位规则一致，所以能找到目标资源；但Put用了前端索引，就和后端的资源路径不匹配了。

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