具有 useState 的多个 Increment/Decrement 按钮失败

Question

我在 two/multiple 输入字段上使用 decrement/increment 按钮，但一旦触发第二个输入字段按钮集，我就会得到以下 error-messages/warnings:

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

第二个字段值从数字变为 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 我的英语不好

具有 useState 的多个 Increment/Decrement 按钮失败

multiple Increment/Decrement buttons with useState fails

state

reactjs

use-state