虽然这听起来很疯狂，但为我解决这个问题的方法是添加一个额外的div

  ... [Other code] ...
  const [brokerLink, setBrokerLink] = useState('');
  ... [Other code] ...

  return (
    ... [Other code] ...
              <div styleName="advanced-form" style={{ margin: '0 auto', }}>
                {/* NOTE: This div */}
                <div>
                  <div styleName="form-field">
                    <div>Broker Link</div>
                    <input
                      type="text"
                      name="brokerLink"
                      value={brokerLink}
                      placeholder=""
                      onChange={e => setBrokerLink(e.target.value)}
                    />
                  </div>
                </div>
              </div>
    ... [Other code] ...
  );
... [Other code] ...

很奇怪。如果没有这个额外的div，由于某种原因，看起来react最初呈现的输入元素没有value属性，而是带有一个空的style属性。你可以通过查看html看到这一点。这导致了控制台警告。。

更奇怪的是，添加一个非空字符串的默认值或执行类似value={brokerLink||''}的操作将导致完全相同的问题。。

另一个奇怪的是，我还有30个几乎完全相同的元素，但没有引起这个问题。唯一不同的是，这个brokerLink没有外部分区。。并将其移动到代码的其他部分而不更改任何内容，从而出于某种原因删除了警告。。

如果没有我的精确代码，可能几乎不可能复制。如果这不是react中的bug，我不知道是什么。

对于功能部件：

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;

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

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

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

Fix:

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

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

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

这样地

value={this.state.fields && this.state.fields["name"] || ''}

为我工作。

但我将初始状态设置为：

this.state = {
  fields: [],
}

const [name, setName] = useState()

在文本字段中键入后立即生成错误

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

将修复此字符串示例上的问题。