一个组件正在将文本类型的不受控制的输入更改为 ReactJS 中的受控错误

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

this.state = { fields: {} }

字段作为空白对象，因此在第一次呈现期间 this.state.fields.name 将是 undefined，输入字段将获得其值：

value={undefined}

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

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

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

那时输入字段被转换为受控组件；这就是您收到错误的原因：

组件正在更改要控制的文本类型的不受控输入。

可能的解决方案：

1- 将状态中的 fields 定义为：

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

2-或使用 Short-circuit evaluation 定义 value 属性，如下所示：

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

将 value 更改为 defaultValue 将解决它。

笔记：

defaultValue 仅用于初始加载。如果你想初始化输入那么你应该使用defaultValue，但是如果你想使用state来改变值那么你需要使用value。阅读本文了解更多信息。

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

在组件内部按以下方式放置输入框。

<input className="class-name"
              type= "text"
              id="id-123"
              value={ this.state.value || "" }
              name="field-name"
              placeholder="Enter Name"
              />

除了接受的答案之外，如果您使用的是 checkbox 或 radio 类型的 input，我发现我还需要检查 checked 属性是否为空/未定义。

<input
  id={myId}
  name={myName}
  type="checkbox" // or "radio"
  value={myStateValue || ''}
  checked={someBoolean ? someBoolean : false}
  />

如果您使用的是 TS（或 Babel），则可以使用空值合并而不是逻辑 OR 运算符：

value={myStateValue ?? ''}
checked={someBoolean ?? false}

很简单，您必须先设置初始状态

如果您不设置初始状态，react 会将其视为不受控制的组件

const [name, setName] = useState()

一旦您在文本字段中输入，就会生成错误

const [name, setName] = useState('') // <-- by putting in quotes 

将解决此字符串示例的问题。

如上所述，您需要设置初始状态，在我的情况下，我忘记在 setSate(); 中添加 ' ' 引号。

  const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState()
  const [enteredAge, setEnteredAge] = useState()

给出以下错误

https://i.stack.imgur.com/AlFd4.png

正确的代码是简单地将初始状态设置为空字符串''

  const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState('')
  const [enteredAge, setEnteredAge] = useState('')

发生这种情况是因为该值不能是 undefined 或 null 来解决你可以这样做

value={ this.state.value ?? "" }

首先设置当前状态...this.state

这是因为当您要分配一个新状态时，它可能是未定义的。所以它也将通过设置状态提取当前状态来修复

this.setState({...this.state, field})

如果你的状态中有一个对象，你应该如下设置状态，假设你必须在用户对象中设置用户名。

this.setState({user:{...this.state.user, ['username']: username}})

解决此问题的最佳方法是将初始状态设置为 ''。

constructor(props) {
 super(props)
  this.state = {
    fields: {
      first_name: ''
    }
  }
  this.onChange = this.onChange.bind(this);
}

onChange(e) {
  this.setState({
    fields:{
     ...this.state.fields,
     [e.target.name]: e.target.value
    }
  })
}


render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields.first_name}
        onChange={this.onChange}
        className="form-control"
        name="first_name" // Same as state key
        type="text"
        refs="name"
        placeholder="Name *"
      />
      <span style={{color: "red"}}>{this.state.errors.first_name}</span>
    </div>
  )
} 

然后，您仍然可以像 if (field) 一样运行检查，并且如果您的值为 ''，仍然可以获得相同的结果。

现在，因为您的值现在被归类为类型字符串而不是评估后未定义。因此，从一个大红色块😁😎的控制台清除错误。

如果值不存在或为空，则放置空值。

value={ this.state.value || "" }

如果您在 on 字段中使用多个输入，请遵循：例如：

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
        };
    });
};

使用 React Hooks 也不要忘记设置初始值。
我使用的是 <input type='datetime-local' value={eventStart} />，初始 eventStart 就像

const [eventStart, setEventStart] = useState();
改为
const [eventStart, setEventStart] = useState('');。

括号中的空字符串是差异。此外，如果您像我一样在提交后重置表单，您需要再次将其设置为空字符串，而不仅仅是空括号。

这只是我对这个话题的一点贡献，也许它会对某人有所帮助。

我使用反应钩子遇到了同样的警告，尽管我之前已经将初始状态初始化为：-

const [post,setPost] = useState({title:"",body:""})

但后来我在 onChange 事件处理程序上覆盖了预定义状态对象的一部分，

 const onChange=(e)=>{
        setPost({[e.target.name]:e.target.value})
    }

解决方案我通过首先处理前一个状态的整个对象（通过使用扩展运算符）然后在它之上进行编辑来解决这个问题，

 const onChange=(e)=>{
        setPost({...post,[e.target.name]:e.target.value})
    }

就我而言，这几乎就是 Mayank Shukla 的最佳答案所说的。唯一的细节是我的状态完全没有我定义的属性。

例如，如果您有这种状态：

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

如果您正在扩展您的代码，您可能想要添加一个新道具，因此，您可以在代码中的其他地方创建一个新属性 c，其值不仅在组件的状态上未定义，而且属性 本身< /em> 未定义。

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