Redux状态不更新求助：控制台有值但页面未同步

问题现象 #

点击增减按钮时，浏览器控制台能打印出更新后的Redux状态值，页面上的<h1>标签也能正常显示最新数值，但<input>字段始终停留在初始值，无法同步状态变化。

问题根源 #

查看你的App.js代码里的input组件：

<input name="quantity" type="text" className="quantity__input" defaultValue={myState}/>

这里使用的defaultValue属性仅在组件首次渲染时赋值一次，后续Redux状态更新触发组件重新渲染时，defaultValue不会响应状态变化，因此input始终显示初始值。

解决方案 #

将defaultValue替换为value，把input设置为受控组件：

<input name="quantity" type="text" className="quantity__input" value={myState} readOnly />

• value={myState}：直接绑定Redux状态，状态更新时input值会自动同步。
• readOnly：由于你的场景是通过按钮增减数值，不需要用户手动输入修改，添加该属性避免用户误操作。如果需要支持手动输入，还需额外添加onChange事件来dispatch动作更新Redux状态。

修改后App.js的关键代码片段 #

<div className="quantity">
  <a className="quantity__minus" title="Decrement" onClick={()=>dispatch(decNumber())}><span>-</span></a>
  <input name="quantity" type="text" className="quantity__input" value={myState} readOnly />
  <h1>{myState}</h1>
  <a className="quantity__plus" title="Increment" onClick={()=>dispatch(incNumber())}><span>+</span></a>
</div>

验证效果 #

修改后点击增减按钮，input字段的值会和<h1>显示内容、控制台打印的状态值保持完全一致，实现状态与页面的同步更新。

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