在React-Redux应用中用fetch的PUT方法编辑数据出现404错误该如何解决？

问题根因 #

你遇到的PUT 404 (Not Found)错误和使用React-Redux无关，属于HTTP请求层面的错误：后端不存在你请求的/users/[用户ID]路径对应的资源，或者后端不支持PUT请求方法。

解决方案 #

• 确认后端服务配置
  如果你用的是json-server作为本地mock后端（从接口路径规则判断概率极高），先核对两个配置：
  1. 检查db.json文件中users数组下是否存在ID为fe917ae4-4d9c-40ae-b160-ae8ef5b4f7a7的用户数据，ID不存在会直接返回404
  2. 确认json-server启动端口是否为3000：如果你的React前端已经占用3000端口，json-server会自动切换到其他端口，建议启动时手动指定端口避免冲突，启动命令为 json-server --watch db.json --port 3004，同步将代码中接口地址的端口改为3004
• 补充现有数据初始化逻辑
  你当前代码中name和email的初始值为空，用户未手动输入直接提交会覆盖原有数据，建议进入页面时先拉取当前用户的原有数据初始化到状态中：

  import { useHistory, useParams } from "react-router-dom";
  import React, { useState, useEffect } from "react";
  
  const EditUser = () => {
    const { id } = useParams();
    const history = useHistory();
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
  
    // 新增：拉取原有用户数据初始化
    useEffect(() => {
      fetch(`http://localhost:3004/users/${id}`)
        .then(res => res.json())
        .then(data => {
          setName(data.name)
          setEmail(data.email)
        })
    }, [id])
  
    function updateUser() {
      let item = { name, email };
      fetch(`http://localhost:3004/users/${id}`, {
        method: "PUT",
        body: JSON.stringify(item),
        headers: {
          "Content-Type": "application/json",
        },
      }).then(res => {
        // 新增：校验请求是否成功
        if (!res.ok) throw new Error('更新失败')
        history.replace("/");
      }).catch(err => console.log(err))
    }
  
    return (
      <div>
        <input
          type="text"
          value={name}
          onChange={(e) => {
            setName(e.target.value);
          }}
        /> <br /><br />
        <input
          type="text"
          value={email}
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        /> <br /><br />
        <button onClick={updateUser}>Update User</button>
      </div>
    );
  };
  export default EditUser;
  

• 检查项目代理配置
  如果你在package.json中配置了proxy字段，或者使用了setupProxy.js配置代理规则，确认/users路径的请求没有被代理到错误的服务地址。

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