如何在Json-server与Axios中使用Delete方法？404报错求助

嘿，我来帮你搞定这个404的问题！你遇到的核心问题是axios.delete的参数传递方式不对，还有几个小细节需要调整，咱们一步步来修正：

问题根源梳理 #

1. URL格式错误：json-server的删除接口要求把资源ID直接拼在URL路径里（比如/people/1），而不是把ID作为第二个参数传给axios.delete——这是导致404的直接原因。
2. this指向丢失：你在.then里用了普通function，导致this不再指向组件实例，后续调用this.setState大概率会报错。
3. 响应处理逻辑偏差：json-server删除成功后返回的是被删除的对象，不是过滤后的完整列表，直接把它赋值给filtered不符合实际需求。

修正后的完整代码 #

remove = (id) => {
  axios.delete(`http://127.0.0.1:3000/people/${id}`)
    .then((response) => {
      // 两种更新状态的方式选其一即可：
      // 方式1：重新请求最新的列表（更可靠，适合多人协作场景）
      // axios.get('http://127.0.0.1:3000/people')
      //   .then(res => this.setState({ filtered: res.data }))
      
      // 方式2：前端直接过滤已删除项（性能更好，适合单人开发场景）
      this.setState(prevState => ({
        filtered: prevState.filtered.filter(item => item.id !== id)
      }))
    })
    .catch((error) => {
      console.error('删除操作失败:', error)
    })
}

关键调整点说明 #

• URL拼接：用ES6模板字符串把ID拼接到URL末尾，让json-server能精准识别要删除的资源，自然就不会返回404了。
• 箭头函数回调：.then里改用箭头函数，确保this始终指向当前组件实例，能正常调用setState更新界面。
• 状态更新优化：根据你的场景选择合适的状态更新方式，要么重新拉取最新数据保证准确性，要么前端过滤提升响应速度。

如果调整后还是有问题，可以检查这两点：

• 确认json-server确实在3000端口运行，且people资源存在，你要删除的ID在数据库里真实存在。
• 打开浏览器Network面板，查看请求的URL是否是http://127.0.0.1:3000/people/xxx（xxx是具体ID）的格式。

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