React中如何将两个输入框的值合并后添加到useState管理的数组中

导致出现属性拆分错误的核心原因是：不要在每次输入单个字段时就直接往products数组里追加内容，应该先把两个输入框的内容分别存在独立的状态里，点击保存时再拼成完整对象一次性追加。

完整代码实现 #

import { useState } from 'react';

function ProductList() {
  // 原商品数组状态
  const [products, setProducts] = useState([
    {name: "Television", price: 1000},
    {name: "Cellphone", price: 800},
    {name: "Pen", price: 1}
  ]);
  // 分别定义两个状态存储输入框内容
  const [inputName, setInputName] = useState('');
  const [inputPrice, setInputPrice] = useState('');

  // 保存按钮点击处理
  const handleSave = () => {
    // 简单非空校验，可根据需求调整
    if (!inputName.trim() || !inputPrice.trim()) return;
    // 拼成完整的新商品对象，注意价格转数字
    const newProduct = {
      name: inputName.trim(),
      price: Number(inputPrice.trim())
    };
    // 一次性追加到原数组，用展开语法生成新数组符合React状态更新规范
    setProducts(prev => [...prev, newProduct]);
    // 保存后清空输入框
    setInputName('');
    setInputPrice('');
  };

  return (
    <div>
      <input 
        placeholder="Name" 
        value={inputName} 
        onChange={(e) => setInputName(e.target.value)} 
      />
      <input 
        placeholder="Price" 
        value={inputPrice} 
        onChange={(e) => setInputPrice(e.target.value)} 
        type="number" // 加type限制只能输入数字，可选配置
      />
      <button onClick={handleSave}>Save</button>
    </div>
  )
}

关键说明 #

• 两个输入框各自绑定独立的状态，输入时只会更新对应的状态值，不会修改products数组，避免了输入单个字段就新增对象的问题
• 点击保存时才会把两个输入状态合并为一个完整的对象，再追加到products数组中，保证新增的对象同时有name和price两个属性
• 更新数组时使用函数式更新setProducts(prev => [...prev, newProduct])，能保证拿到的原数组永远是最新的，避免闭包导致的状态更新错误

内容的提问来源于stack exchange，提问作者Lucas Bastos