Question

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

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

第二个字段值从数字到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按钮失败

1 个答案: