如何在 React 上使用 axios 执行 post 请求并将数据作为 FormData 传递？

Question

有这个 API:http://zssn-backend-example.herokuapp.com/api/, detailed here: http://zssn-backend-example.herokuapp.com/swagger-api/index.html#!/people/Api_People_index 。我正在尝试在此端点“/people/{person_id}/properties/trade_item.json”上执行 POST 请求（在幸存者之间进行贸易交易）。在用于测试的网站上，我用以下数据填充了字段并得到了 204 响应：

person_id:34e183a6-965e-4a61-8db5-5df9103f4d4b

消费者[姓名]：Person4

消费者[选择]：AK47:1；金宝汤Soup:1

消费者[付款]：急救Pouch:2

我调查了一下，得到了 this information

不理解“属性[KEY]:VALUE”的表示

当我尝试使用此代码请求时，具有相同的值（顺便说一下，此 API 的数据库每 24 小时清除一次，因此即使您这样做，这些值也可能不起作用以正确的方式）：

这是我的代码：

    async function handleTrade(e){

   e.preventDefault();

     const config = {
       headers: {
         "Content-Type": "application/x-www-form-urlencoded",
       },
     };
     await api.post(
       "/people/" + match.params.id + "/properties/trade_item.json",
       {
         person_id:match.params.id,
         name: survivorRef.current,
         pick: survivorItemsToPick,
         payment: userItemsToPay,
       },
       config
     );

这就是我得到的：要求： request-description

回复： response-description

如何才能以正确的方式发出此请求以获得与第一个图像相同的结果？

Answer 1

可以使用FormData发送请求，我做了一个例子：

const data = new FormData();
data.append("customer[name]", "Person4");   
data.append("customer[pick]", "AK47:1");         
await api.post("/people/" + match.params.id + "/properties/trade_item.json", data, config)

如何在 React 上使用 axios 执行 post 请求并将数据作为 FormData 传递？

How to perform a post request with axios on React and pass your data as FormData?

reactjs

post

request

axios

form-data