React出现A component is changing a controlled input to be uncontrolled警告如何解决

触发原因 #

你的代码在更新邮箱字段的状态分支中遗漏了手机号属性：
当邮箱输入框触发onChange事件时，updatfullNa返回的新状态对象仅包含fName、lName、eMail三个属性，原有pHone属性被丢弃，导致fullname.pHone从初始的空字符串变为undefined。输入框绑定的value属性变为undefined后，React会将原本的受控输入判定为非受控输入，触发对应警告。

修复方案 #

方案1：补全缺失字段（适配现有写法） #

找到name === 'eMail'的判断分支，在返回的对象中补全pHone属性即可：

else if (name === 'eMail') {
    return { 
        fName: preValue.fName,
        lName: preValue.lName,
        eMail:value,
        pHone: preValue.pHone
    }
}

方案2：使用对象展开运算符简化代码（推荐） #

可以直接删除所有的分支判断，用对象展开语法保留原有所有属性，仅更新对应字段，彻底避免遗漏属性的问题：

const Inputevent = (event) => {
    const{value, name}=event.target
    updatfullNa((preValue) => {
        // 展开原有所有属性，仅更新当前修改的字段
        return {...preValue, [name]: value}
    })
}

两种方案任选其一都可以解决该警告，方案2代码更简洁，后续新增字段也不需要额外修改逻辑，更易维护。

内容的提问来源于stack exchange，提问作者Yogita Suresh Taluja