ReactJS表单input输入值修改后state更新但UI不刷新问题咨询

问题原因 #

你没有遵守React状态更新的不可变原则。let track= user这行只是复制了原user对象的引用，你直接修改这个引用上的属性后再调用setUser，React做浅比较时会判定state没有发生变化，因此不会触发UI重渲染。

修复方案 #

把handleChange修改为如下写法：

const handleChange= (e)=>{
  const { name, value } = e.target;
  // 基于旧状态生成全新的对象返回
  setUser(prevState => ({
    ...prevState,
    [name]: value
  }));
}

额外优化建议 #

• 初始化state时提前声明所有表单字段的默认值，避免触发受控组件转非受控的警告：

  const [user, setUser] = useState({firstInput: '', secondInput: ''});
  

• 如果需要输入值为数字类型，可以把value转换为数字再存入state，避免字符串和数字混用的逻辑问题：

  [name]: Number(value)
  

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