从受控输入创建对象数组

如何解决从受控输入创建对象数组

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

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

解决方法

您可以使用对象代替数组。

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

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

,

我正在粘贴一个普通的 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) }
     }  
}