react中受控组件相关的warning

在表单中，报如下的错，意思是非受控的输入框变成了受控的，报错信息如下

Warning: A component is changing an uncontrolled input of type text to be controlled.Input elements should not switch from uncontrolled to controlled (or vice versa).
 Decide between using a controlled or uncontrolled input element for the lifetime of the component.　

我写的代码如下：

 <input
     className="form-control"
     name="productName"
     placeholder="请输入商品名称"
     value={this.state.detail.productName || ""}
     onChange={(e)=>{this.inputValueChange(e)}}
/>

该元素将value绑定在this.state.detail对象中，obj对象在componentDidMount生命周期中进行初始化

原因：

因为在第一次render组件时，this.state.obj={}，于是this.state.detail.productName为undefined，于是input接受到的就是value={undefined}
当ReactDOM检测这个元素是不是受控时，它的判断条件是value!=null，注意是!=而不是!==，
又由于undefined==null，所以判断该组件是非受控组件
而我又在input元素上绑定了onChange方法改变了value，将它变成了受控组件，所以产生了报错信息

解决办法
在constructor中修改this.state，给detail设置一个默认的初始值，如下所示

this.state={
	 detail:{
		 productName: ‘‘,
	}
}

react中受控组件相关的warning

原文：https://www.cnblogs.com/karila/p/10644671.html