如何在 React/JavaScript 中将键值对迭代到 FormData Append答案

【问题标题】：How to iterate key value pairs to FormData Append in React/JavaScript如何在 React/JavaScript 中将键值对迭代到 FormData Append
【发布时间】：2020-12-06 10:11:54
【问题描述】：

我有很多键值对需要附加到 FormData()。所以我希望它迭代，所以我不会一次又一次地重新输入它

对象

values: { username: 'johndoe', password: 123, contact_no: '18323223', place: 'LA' }

组件代码

 onSubmit: (values) => {
      dispatch(signUp(values)).then((response) => {
        alert('Success');
      });
    },

API 代码

export function signUpAPI(values) {
  let formData = new FormData();
  Object.keys(values).forEach((fieldName) => {
    console.log(fieldName, values);
    formData.append(fieldName, values);
  });
}

【问题讨论】：

标签： javascript reactjs redux ecmascript-6

【解决方案1】：

由于您已经在迭代键名，因此您似乎距离让代码正常工作还有几英寸的距离，因此您需要做一些事情，例如：

export function signUpAPI(inputData) {
  let formData = new FormData();
  Object.keys(inputData).forEach(fieldName => {
    console.log(fieldName, inputData[fieldName]);
    formData.append(fieldName, inputData[fieldName]);
  })
  return formData
}

【讨论】：

【解决方案2】：

当我有键和值时，我喜欢使用 Object.entries：

export function signUpAPI(values) {
  let formData = new FormData();
  for (const [key, value] of Object.entries(values) {
    console.log(key, value);
    formData.append(key, value);
  });
}

【讨论】：

在性能方面Object.entries() 与Object.keys() 相比略有劣势。
嗯，你是对的，但是当我处理表单时，我宁愿总是使用更易读的代码。如果该对象确实超过了几千个键值对，我会选择性能...
在渲染 UI 时，您会坚持使用大多数高性能方法，同样争取毫秒。