为什么给受控输入组件传null或undefined时，输入框展示值不更新？

问题现象 #

使用受控input组件开发时，如果将受控组件的value设置为null或undefined，会出现绑定状态已更新，但UI仍展示之前输入值的异常，无法正常同步刷新。

触发原因 #

React的受控组件要求value属性持续绑定有效值，当传入null或undefined时，React会判定该组件切换为非受控模式，后续状态变更不会再触发输入框内容的更新。

解决方案 #

• 给value属性做空值兜底，所有空值统一转换为空字符串，写法参考：

  <input value={inputValue ?? ''} onChange={handleInputChange} />
  

• 状态初始化和更新逻辑中，避免将null/undefined赋值给受控组件绑定的状态变量，统一用空字符串作为空态取值。

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