警告:组件正在更改要控制的文本类型的非受控输入。输入元件不应从非受控切换到受控(反之亦然)。决定在部件的使用寿命内使用受控或非受控输入元件*

以下是我的代码:

constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
  this.onSubmit = this.onSubmit.bind(this);
}

....

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

....

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

当前回答

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

例如,如果您的状态为:

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

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

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

例如。,

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

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

其他回答

简单地说,您必须首先设置初始状态

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

对于功能部件:

const SignIn = () => {

  const [formData, setFormData] = useState({
    email: "",
    password: ""
  });

  
  const handleChange = (event) => {
    const { value, name } = event.target;
    setFormData({...formData, [name]: value });
  };


  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Signed in");
    setFormData({
      email: "",
      password: ""
    });
  };


  return (
    <div className="sign-in-container">
      <form onSubmit={handleSubmit}>
        <FormInput
          name="email"
          type="email"
          value={formData.email}
          handleChange={handleChange}
          label="email"
          required
        />
        <FormInput
          name="password"
          type="password"
          value={formData.password}
          handleChange={handleChange}
          label="password"
          required
        />
        <CustomButton type="submit">Sign in</CustomButton>
      </form>
    </div>
  );
};

export default SignIn;

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

注:

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

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

如上所述,您需要设置初始状态,在我的例子中,我忘记在setSate()中添加“”引号;

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

出现以下错误

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

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

对我来说,这是一个错误:

<input onChange={onClickUpdateAnswer} value={answer.text}>
  {answer.text}
</input>

如您所见,我已将字符串传递到Input标记的主体中,

Fix:

<input onChange={onClickUpdateAnswer} value={answer.text}></input>