React Input值不更新求助：Redux下点击按钮仅旁侧值变更

算力阿峰

2026-5-15

问题分析与解决方案

我先仔细看了你的代码，发现了一个非常容易踩坑的细节，这大概率就是Input值不更新的原因：

1. Input组件的属性名写错了！

你在代码里给Input绑定的是大写的Value：

<Input name="selectedItemQty" id="selectedItemQty" Value={this.props.selectedEditItem.Quantity} onBlur={this.handleQuantityBlur}></Input>

但React里控制输入框值的属性是小写的value！大写的Value并不会被React识别为受控组件的绑定属性，所以Input根本没接收到props更新后的数值，自然不会跟着变化。

把它改成小写就好：

<Input name="selectedItemQty" id="selectedItemQty" value={this.props.selectedEditItem.Quantity} onBlur={this.handleQuantityBlur}></Input>

2. 万一修改后还是有问题？再排查这几点

如果改完属性名后Input还是没反应，建议检查下面这些地方：

Redux Reducer的不可变更新：确保setEditItemQuantity对应的reducer是用不可变方式更新状态的。比如不能直接修改原对象，要返回新对象：

// ❌ 错误写法：直接修改原状态
case SET_EDIT_ITEM_QUANTITY:
  state.selectedEditItem.Quantity = action.payload.quantity;
  return state;

// ✅ 正确写法：返回新的状态对象
case SET_EDIT_ITEM_QUANTITY:
  return {
    ...state,
    selectedEditItem: {
      ...state.selectedEditItem,
      Quantity: action.payload.quantity
    }
  };

Redux靠状态的引用变化触发组件重渲染，直接改原对象的话，组件会以为状态没变化，不会更新。

componentWillReceiveProps的逻辑：你在这个生命周期里判断refreshEditItemData为true时会重新加载数据，要确保加载完成后这个标记被重置为false，不然可能会重复加载数据，把你刚更新的数值覆盖掉。
确认Input组件的受控逻辑：从代码里的Modal、Form来看，你用的应该是React Bootstrap的Input组件，它的value属性确实是用来控制输入值的，没有自定义逻辑干扰。