从受控输入创建对象数组

Question

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

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 }
}

Answer 1

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

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

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

Answer 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) }
     }  
}

从受控输入创建对象数组

Create an array of objects from controlled inputs

javascript

arrays

spread

ecmascript-6

reactjs