从受控输入创建对象数组答案

【问题标题】：Create an array of objects from controlled inputs从受控输入创建对象数组
【发布时间】：2021-09-18 21:10:26
【问题描述】：

我有一个动态创建输入的表单。输入的数量及其名称会根据获取的数据而变化。我想根据从这些输入中获得的值创建一个对象数组。

const [form, setForm] = useState([]);
packages = ["250g", "500g"] //This varies depending on fetched data

HTML：

<form onSubmit={(e) => handleSubmit(e)}>
            <ul>
                {packages.map((packageName, index) => {
                    return (
                        <li key={index}>
                            <p>{packageName}</p>
                            <input type="number" min={0} value={form[packageName]} onChange={(e) => handleChange(e, packageName)} />
                            <button type="submit">BUY</button>
                        </li>
                    );
                })}
            </ul>
        </form>

handleChange 函数：

const handleChange = (e, packageName) => {
    setForm([...form, { [packageName]: parseInt(e.target.value) }]);
};

当前输出：

form: [
    {
       "250g": 1
    },
    {
       "250g": 2
    },
    {
       "250g": 3
    },
    {
       "500g": 1
    },
    {
       "500g": 2
    }

]

输入值的每次更改都会创建一个新对象，但我只想更改当前已更改的特定对象中的值。

期望的输出：

form: {
    "250g": { quantity: 3 },
    "500g": { quantity: 2 }
}

【问题讨论】：

你想要的输出不是一个有效的 JS 结构。如果form 是一个对象而不是一个数组就可以了。
我猜结构是这样的？ form: [ { "250g": { quantity: 3 }}, { "500g": { quantity: 2 }}]
好的，我现在从编辑中看到所需的输出是什么
@MadGrip 检查我的答案。我编辑它是因为我认为表单是一个数组，但我看到了编辑:)
MadGrip 你检查我们的答案了吗？

标签： javascript arrays reactjs ecmascript-6 spread

【解决方案1】：

您可以使用对象而不是数组。

const [form, setForm] = useState({});

const handleChange = (e, packageName) => {
    setForm({
         ...form,
         [packageName]: { quantity: parseInt(e.target.value) }
    });
}

【讨论】：

【解决方案2】：

我正在粘贴一个 vanilla js 示例可执行文件。

   let form = {}

function add(str) {
 if (form[str]) {
  form[str].quantity += 1
 } else {
  form[str] = { quantity: 1}
 }
}

add("250g")
add("250g")
add("250g")
add("750g")
add("500g")
add("750g")

console.log(form)

所以我猜你的方法会变成这样

const handleChange = (e, packageName) => {
  let newForm = JSON.parse(JSON.stringify(form))
  
     if (newForm[packageName]) {
      newForm[packageName].quantity += parseInt(e.target.value)
       setForm(newForm);
     } else {
            setForm({
         ...form,
         [packageName]: { quantity: parseInt(e.target.value) }
     }  
}

【讨论】：