React中对象数组状态的添加与更新判断逻辑实现问题

核心思路 #

因为你是固定的3个输入框，完全不需要区分「添加」或「更新」操作——直接初始化状态为对应3个元素的数组，每个输入框绑定数组里的对应位置，输入变化时直接更新该位置的对象值即可。

具体实现步骤 #

1. 初始化状态
   直接创建包含3个{ par: '' }对象的数组作为初始状态，和输入框一一对应：

   const [values, setValues] = useState([{ par: '' }, { par: '' }, { par: '' }]);
   

2. 绑定输入框与状态
   给每个输入框绑定对应索引的状态值，同时在onChange事件中传入当前输入框的索引：

   <input 
     type='number' 
     value={values[0].par} 
     onChange={(e) => handleInputChange(0, e.target.value)}
   />
   <input 
     type='number' 
     value={values[1].par} 
     onChange={(e) => handleInputChange(1, e.target.value)}
   />
   <input 
     type='number' 
     value={values[2].par} 
     onChange={(e) => handleInputChange(2, e.target.value)}
   />
   

3. 实现状态更新逻辑
   编写handleInputChange函数，利用map方法遍历原数组，找到对应索引的元素并更新其par值，其他元素保持不变：

   const handleInputChange = (index, newValue) => {
     setValues(prevValues => {
       return prevValues.map((item, i) => {
         if (i === index) {
           // 扩展运算符复制原对象，更新par属性
           return { ...item, par: newValue };
         }
         return item;
       });
     });
   };
   

额外说明 #

如果你的输入框数量不固定（比如动态增减），那才需要判断索引是否存在：

• 若索引超出当前数组长度，用扩展运算符添加新元素：[...prevValues, { par: newValue }]
• 若索引在数组范围内，就用map更新对应元素

但针对你固定3个输入框的场景，直接初始化对应长度的数组是最简洁高效的方案。

内容的提问来源于stack exchange，提问作者Daniel Evans