React中PUT更新SuperAdmin遇formData字段Undefined及Axios 404错误求助

问题1：formData中superAdmin字段显示为Undefined #

原因分析 #

1. 表单输入未正确更新嵌套的superAdmin对象：当前handleChange函数直接将输入值赋值到state外层，而非嵌套的superAdmin对象中，导致EditSuperAdmin.superAdmin始终为空或未被更新。
2. 表单value取值错误：输入框的value直接从state外层取值，但初始state中这些属性属于superAdmin嵌套对象，接口返回的扁平数据会导致superAdmin字段未被正确赋值。
3. 数据加载时结构不匹配：loadAdmin直接将接口返回的扁平数据赋值给state，未映射到superAdmin嵌套结构中，导致superAdmin字段缺失。

修复代码 #

修改handleChange函数，更新嵌套对象

const handleChange = (e) => {
  const { name, value } = e.target;
  setEditSuperAdmin((prevState) => ({
    ...prevState,
    superAdmin: {
      ...prevState.superAdmin,
      [name]: value
    }
  }));
};

修正表单输入的value属性

将所有输入框的value改为从superAdmin对象中取值，示例：

// 原代码
value={EditSuperAdmin.firstName}
// 修改后
value={EditSuperAdmin.superAdmin.firstName}

调整loadAdmin函数，适配接口返回结构

如果接口返回扁平数据（无superAdmin嵌套），需将数据映射到嵌套结构：

const loadAdmin = useCallback(async () => {
  const response = await axios.get(`/superAdmin/allsuperAdminById/${id}`);
  const adminData = response.data[0];
  setEditSuperAdmin({
    profilePhoto: null,
    password: adminData.password || "",
    superAdmin: {
      firstName: adminData.firstName || "",
      lastName: adminData.lastName || "",
      mobileNumber: adminData.mobileNumber || "",
      phoneNumber: adminData.phoneNumber || "",
      lastModifiedBy: adminData.lastModifiedBy || ""
    }
  });
}, [id]);

问题2：Axios返回404错误 #

原因分析 #

1. 请求路径不匹配：后端接口路径可能为小写（如/superadmin/updateById/${id}），前端使用大写路径导致路由无法匹配。
2. id参数无效：useParams()获取的id可能为undefined，或格式不符合后端要求。
3. 后端未配置PUT路由：后端未实现/superAdmin/updateById/${id}的PUT请求处理逻辑。

修复步骤 #

1. 修正请求路径：确认后端接口的正确路径，保持前后端路径大小写一致：

await axios.put(`/superadmin/updateById/${id}`, formData, {
  headers: { "Content-Type": "multipart/form-data" },
})

2. 验证id参数：在handleSubmit中打印id，确认参数是否正确传递：

console.log("当前编辑ID:", id);

3. 检查后端配置：确认后端已正确配置PUT请求路由，并允许跨域请求（若存在跨域场景）。

核心修改后代码片段 #

const EditAdmin = () => {
  const { id } = useParams();

  const [EditSuperAdmin, setEditSuperAdmin] = useState({
    profilePhoto: null,
    password: "",
    superAdmin: {
      firstName: "",
      lastName: "",
      mobileNumber: "",
      phoneNumber: "",
      lastModifiedBy: "",
    },
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setEditSuperAdmin((prevState) => ({
      ...prevState,
      superAdmin: {
        ...prevState.superAdmin,
        [name]: value
      }
    }));
  };

  const loadAdmin = useCallback(async () => {
    const response = await axios.get(`/superAdmin/allsuperAdminById/${id}`);
    const adminData = response.data[0];
    setEditSuperAdmin({
      profilePhoto: null,
      password: adminData.password || "",
      superAdmin: {
        firstName: adminData.firstName || "",
        lastName: adminData.lastName || "",
        mobileNumber: adminData.mobileNumber || "",
        phoneNumber: adminData.phoneNumber || "",
        lastModifiedBy: adminData.lastModifiedBy || ""
      }
    });
  }, [id]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log("当前编辑ID:", id);

    const formData = new FormData();
    if (EditSuperAdmin.profilePhoto) {
      formData.append('profilePhoto', EditSuperAdmin.profilePhoto);
    }
    formData.append('password', EditSuperAdmin.password);
    formData.append('superAdmin', JSON.stringify(EditSuperAdmin.superAdmin));
    console.log(Object.fromEntries(formData));

    try {
      const res = await axios.put(`/superAdmin/updateById/${id}`, formData, {
        headers: { "Content-Type": "multipart/form-data" },
      });
      console.log(res.data[0]);
      navigate("/superAdmin");
    } catch (error) {
      console.error("更新失败:", error);
    }
  };

  // 其余代码保持不变
};

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