Axios Patch 方法正在覆盖现有数据答案

【问题标题】：Axios Patch method is overriding the existing dataAxios Patch 方法正在覆盖现有数据
【发布时间】：2022-08-20 07:37:41
【问题描述】：

enter image description here

如果我决定只更新一个字段而将其他字段留空，因为它们已经有我不需要更新的数据，我的 axios 补丁方法会用空数据覆盖现有数据，这是一种非常糟糕的体验。这是我的代码和我尝试过的。

    const yupSchema = yup.object().shape({
        userName: yup.string(),
        gender: yup.string(),
        phoneNumber: yup.string(),
        bio: yup.string(),
        address: yup.string(),
    })

    const {
          handleSubmit,
          register,
          formState: { errors },
         } = useForm({ resolver: yupResolver(yupSchema) });


    const onSubmit = handleSubmit(async (value) => {
    
          const {userName, bio, address, phoneNumber, gender} = value
          const formData = new FormData()

          formData.append(\"userName\", userName)
          formData.append(\"phoneNumber\", phoneNumber)
          formData.append(\"bio\", bio)
          formData.append(\"address\", address)
          formData.append(\"gender\", gender)

我不知道我在这里做的是否正确，但我知道问题出在此处作为参数传递的对象值

          await axios.patch(`${url}/api/member/${userData._id}`,{userName, bio, address, 
           phoneNumber, gender})
         })

当我路由到编辑页面时，我可以做些什么来实现在输入字段中获取数据，我如何使用 SWR 完成这项工作？

你的formData怎么了？你还在用吗？
没有表单数据没有做任何事情，我应该把它注释掉，我也试过了，也许它会帮助我附加到数据，但它没有给我想要的结果。

标签： javascript reactjs axios patch swr

【解决方案1】：

我猜你的服务器端代码接受请求中的任何属性并相应地设置它们，即使它们是空的。

您要做的是在发送之前过滤掉那些空属性。

例如

const onSubmit = handleSubmit(async (value) => {
  const payload = Object.fromEntries(
    Object.entries(value).filter(([_, val]) => !!val)
  );

  await axios.patch(`${url}/api/member/${userData._id}`, payload);

也可以看看

【讨论】：

我试图很好地观察这段代码并在打孔之前理解它。这样我就可以轻松实施您的建议。
@Leyksnal 它正在从您的 value 对象创建一个新对象，其中任何空（假的) 属性值已被删除
谢谢我会仔细研究它，它将解决我的问题
你是个天才，这刚刚解决了我的问题，我几乎要研究这些方法。但是我想问你一个问题....那么，如果我想过滤掉包含某些特定单词的字段，这是一个很好的方法吗？我可以依靠这些方法来实现这个目标吗？ .?
当然，您只需要调整filter() 函数。返回true 包含，false 排除