如果您正在将value属性设置为对象的属性，并希望确保该属性未定义，则可以组合空合并运算符？？带有可选的链接运算符？。如下所示：

<input
  value={myObject?.property ?? ''}
/>

对我来说，这是一个错误：

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

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

Fix:

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

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

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 || '') = ''

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

我解决了：

而不是这样

const [email, setEmail] = useState();

我添加了这个

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

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

除了接受的答案之外，如果您使用的是类型为checkbox或radio的输入，我发现我还需要null/undefined检查选中的属性。

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

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

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

对于功能部件：

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;