多个带有 useState 的递增/递减按钮失败

Question

我在两个/多个输入字段上使用递减/递增按钮，但一旦触发第二个输入字段按钮集，我就会收到以下错误消息/警告：

警告：组件正在将未定义类型的受控输入更改为不受控。

第二个字段值从数字变为 NaN。

const [formField, setFormField] = useState({ drivingTime: 5, shorePower: 15 });

const handleOnChange = e => {
    const { name, value } = e.target;
    setFormField({ [name]: parseInt(value, 10) });
};

const IncrementItem = (name) => {
    setFormField(prev => ({ [name]: parseInt(prev[name], 10) + 1 }));
}

const DecreaseItem = (name) => {
    setFormField(prev => ({ [name]: parseInt(prev[name], 10) - 1 }));
}  

输入如下：

 <input
  name="drivingTime"
  value={formField.drivingTime}
  onChange={handleOnChange}
  ref={register({ required: true })}
/>

<button className="btnIncrease" onClick={() => IncrementItem('drivingTime')}>+</button>
<button className="btnDecrease" disabled={formField.drivingTime < 1} onClick={() => DecreaseItem('drivingTime')}>-</button>  

和

  <input
   name="shorePower"
   value={formField.shorePower}
   onChange={handleOnChange}
   ref={register({ required: true })}
  />

  <button className="btnIncrease" onClick={() => IncrementItem('shorePower')}>+</button>
  <button className="btnDecrease" disabled={formField.shorePower< 1} onClick={() => DecreaseItem('shorePower')}>-</button>  

我到底想念什么？

Answer 1

const IncrementItem = (name) => {
    setFormField(prev => ({ ...formField, [name]: parseInt(prev[name], 10) + 1 }));
}

const DecreaseItem = (name) => {
    setFormField(prev => ({ ... formField, [name]: parseInt(prev[name], 10) - 1 }));
}  

我认为您已经覆盖了您的状态，将 IncrementItem 和 DecreaseItem 更改为此 .Sr 我的英语不好