时间戳

首页 > 解决方案 > axios在strapi.io中提出编辑用户的请求不起作用

reactjs - axios在strapi.io中提出编辑用户的请求不起作用

问题描述

我正在尝试使用 Strapi.io 中的 axios PUT 更新用户头像。我最初是在 componentDidmount 上获取用户数据。

初始状态

first_name: "Foo"
last_name: "Bar"
address: "456 address"
city: "City Address"
country: "Philippines"
zipcode: "1234"
error: ""
avatar: "https://limitless-brushlands-81295.herokuapp.com/uploads/ed4648185e1e425c884beabb99a92695.png"

这是用户提交编辑数据时的代码

handleOnSubmit = (event) => {
    const {first_name,last_name,address,city,country,zipcode,avatar} = this.state
    event.preventDefault();
    const data = {
      first_name,
      last_name,
      address,
      city,
      country,
      zipcode
    };
    console.log(data)
    var bodyFormData = new FormData();

    bodyFormData.append('files.image', avatar)
    bodyFormData.append('data', JSON.stringify(data));

    axios({
      method: 'PUT',
      url: `${strapi}/users/${getId()}`,
      data: bodyFormData,
      headers: {
        'Content-Type': 'multipart/form-data',
        }
      })
      .then(function (response) {
        // window.location.href = `/profile/${getId()}`;
        console.log(response.data);
      })
      .catch(function (response) {
        //handle error
        console.log(response);
      });
  }

我收到 200 条回复，但不会更新。我检查了控制台的状态，这是输出

first_name: "Foobar"
last_name: "Bar"
address: "123 address"
city: "City Address"
country: "Philippines"
zipcode: "4026"
error: ""
avatar: "blob:http://localhost:3000/ecf9e21f-1081-4afc-80b1-1223cb6058bd"

此日志是在用户输入数据之后

我希望有一个人可以帮助我

这是场景

使用 axios 获取来自strapi 的数据获取请求

first_name: "Foo"
last_name: "Bar"
address: "456 address"
city: "City Address"
country: "Philippines"
zipcode: "1234"
error: ""
avatar: "https://limitless-brushlands-81295.herokuapp.com/uploads/ed4648185e1e425c884beabb99a92695.png"

应该用这个数据代替

first_name: "Foobar"
last_name: "Bar"
address: "123 address"
city: "City Address"
country: "Philippines"
zipcode: "4026"
error: ""
avatar: "blob:http://localhost:3000/ecf9e21f-1081-4afc-80b1-1223cb6058bd"

标签： reactjsrequestaxiosstrapi

解决方案

尝试使用下面的axios put方法并检查是否有响应。请提及什么未更新，状态更新或您的回复未来？

const body = {body : bodyFormData};
const header =  {
 headers: {
        'Content-Type': 'multipart/form-data',
        }
}
axios.put(`${strapi}/users/${getId()}` ,body ,header)
.then(res => {
console.log(res)
})

在 axios 中，第一个参数是 URL，第二个参数是 header。但是对于 POST 或 PUT，第二个参数充当正文，第三个参数充当标题

推荐阅读