Question

我的问题很简单，我有一个使用此语法的react项目：

const data = new FormData();
data.append("token", this.props.token);
data.append("origin", this.props.origin);
....

我的问题是：

有什么办法可以更改此追加到一行或类似这样的语法？

const data = new FormData([('token', this.props.token), ('origin', this.props.origin)])

Answer 1

如果要将props中的所有项目都添加到FormData中，

const formData = new FormData();
Object.keys(this.props)
      .forEach(key => formData.append(key, this.props[k])

如果要将this.props中的特定键添加到FormData，则可以创建所有key的数组，然后遍历它们：

const addToFormData= ["token", "origin"]
const formData = new FormData();

addToFormData.forEach(k => formData.append(k, this.props[k])

Answer 2

没有任何方法可以在一行中设置表单数据

https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

但是您可以传递诸如array之类的道具并循环遍历

like：

   const keyValuePair=[
      {key:"token",value:this.props.token},
      {key:"origin",value:this.props.origin}
   ]

const data = new FormData();
keyValuePair.map((keyvalue)=>{
  data.append(keyvalue.key,keyvalue.value);
})

Answer 3

默认情况下它不支持，您可以使用第三方程序包来帮助您，这里是一个不错的https://www.npmjs.com/package/object-to-formdata

示例

import objectToFormData from "object-to-formdata";

const data = new FormData(objectToFormData({ token: this.props.token, origin: this.props.origin }));

或

import objectToFormData from "object-to-formdata";

const { origin, token } = this.props;
const data = new FormData(objectToFormData({ token, origin }));

Answer 4

您可以使用Object.entries并遍历每个键值对：

const obj = {
  getFormData() {
    const fd = new FormData();
    Object.entries(this.props)
      .forEach( ([key, value]) => fd.append(key, value) );
    // to show they'e added the same way
    fd.append('manual', 'manually set');
    return fd;
  },
  props: {
    key1: 'val1',
    key2: 'val2',
    key3: 'val3',
    key4: 'val4'
  }
};

console.log(...obj.getFormData());

Answer 5

没有常量数据的类型定义。如果您说数据是一个FormData并具有探测标记和起源，那么您可以在一行中轻松编写它：

const FormData data = new FormData(){ token = this.props.token, origin = this.props.origin };

FormData（）。在单行中传递多个参数

5 个答案:

示例

或