当输入字段值未定义时，此问题的原因是引发react的警告。如果您为多个输入字段创建了一个changeHandler，并且希望使用changeHandler更改状态，则需要使用by spread运算符指定先前的值。就像我这里的代码一样。

constructor(props){
    super(props)
    this.state = {
        user:{
            email:'',
            password:''
        }
    }
}

// This handler work for every input field
changeHandler = event=>{
    // Dynamically Update State when change input value
    this.setState({
        user:{
            ...this.state.user,
            [event.target.name]:event.target.value
        }
    })
}

submitHandler = event=>{
    event.preventDefault()

    // Your Code Here...
}

render(){
    return (
        <div className="mt-5">
       
            <form onSubmit={this.submitHandler}>
                <input type="text" value={this.state.user.email} name="email" onChage={this.changeHandler} />
                
                <input type="password" value={this.state.user.password} name="password" onChage={this.changeHandler} />

                <button type="submit">Login</button>
            </form>
      

        </div>
    )
}

在我的情况下，这几乎是玛雅克·舒克拉的最高答案所说的。唯一的细节是我的州完全没有我所定义的财产。

例如，如果您的状态为：

state = {
    "a" : "A",
    "b" : "B",
}

如果您正在扩展代码，您可能需要添加一个新属性，因此，在代码的其他地方，您可能会创建一个新的属性c，其值不仅在组件的状态中未定义，而且属性本身也未定义。

要解决这个问题，只需确保将c添加到状态中，并给它一个适当的初始值。

例如。，

state = {
    "a" : "A",
    "b" : "B",
    "c" : "C", // added and initialized property!
}

希望我能解释我的边缘案例。

原因是，在您定义的状态中：

this.state = { fields: {} }

字段作为空白对象，因此在第一次渲染过程中，this.state.fields.name将未定义，输入字段的值将为：

value={undefined}

因此，输入字段将变得不受控制。

在输入中输入任何值后，状态中的字段将更改为：

this.state = { fields: {name: 'xyz'} }

此时，输入场被转换为受控分量；这就是为什么会出现错误：

组件正在将文本类型的非受控输入更改为受约束的。

可能的解决方案：

1-将状态中的字段定义为：

this.state = { fields: {name: ''} }

2-或使用短路评估定义值属性，如下所示：

value={this.state.fields.name || ''}   // (undefined || '') = ''

如果在字段中使用多个输入，请执行以下操作：例如：

class AddUser extends React.Component {
   constructor(props){
     super(props);

     this.state = {
       fields: { UserName: '', Password: '' }
     };
   }

   onChangeField = event => {
    let name = event.target.name;
    let value = event.target.value;
    this.setState(prevState => {
        prevState.fields[name] =  value;
        return {
           fields: prevState.fields
        };
    });
  };

  render() { 
     const { UserName, Password } = this.state.fields;
     return (
         <form>
             <div>
                 <label htmlFor="UserName">UserName</label>
                 <input type="text" 
                        id='UserName' 
                        name='UserName'
                        value={UserName}
                        onChange={this.onChangeField}/>
              </div>
              <div>
                  <label htmlFor="Password">Password</label>
                  <input type="password" 
                         id='Password' 
                         name='Password'
                         value={Password}
                         onChange={this.onChangeField}/>
              </div>
         </form>
     ); 
  }
}

在以下位置搜索您的问题：

onChangeField = event => {
    let name = event.target.name;
    let value = event.target.value;
    this.setState(prevState => {
        prevState.fields[name] =  value;
        return {
            fields: prevState.fields
        };
    });
};

我是reactjs的新手，我使用的是reactjs的17版我遇到了这个问题

我解决了：

而不是这样

const [email, setEmail] = useState();

我添加了这个

const [email, setEmail] = useState("");

在useState函数中，我添加了引号来初始化数据，错误消失了。

将值更改为defaultValue将解决该问题。

注：

defaultValue仅用于初始加载。如果要初始化输入，则应使用defaultValue，但如果要使用state更改值，则需要使用value。阅读此内容了解更多信息。

我在输入中使用了value={this.state.input ||“”}来消除该警告。