这种情况通常只发生在应用程序启动时，您没有控制字段的值，而在某些事件或某些函数触发或状态改变后，您现在试图控制输入字段中的值。

这种从无法控制输入到可以控制输入的转变是导致问题发生的首要原因。

避免这种情况的最佳方法是在组件的构造函数中为输入声明一些值。 这样，输入元素在应用程序开始时就有了值。

我相信我的输入是受控的，因为它有一个值。

对于一个被控制的输入，它的值必须与状态变量的值相对应。

在您的示例中，这个条件最初没有满足，因为this.state.name最初没有设置。因此，输入最初是不受控制的。一旦onChange处理程序第一次被触发，this.state.name就会被设置。此时，上述条件满足，则认为输入是受控的。这种从不受控到受控的转变产生了上面所见的错误。

通过在构造函数中初始化this.state.name:

e.g.

this.state = { name: '' };

输入将从一开始就受到控制，从而解决问题。更多示例请参见React受控组件。

与此错误无关，您应该只有一个默认导出。上面的代码有两个。

这是一个更新。对于React Hooks使用const [name, setName] = useState(" ")

请试试这段代码

import React from "react";

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: "" };
        this.onFieldChange = this.onFieldChange.bind(this);
    }

    onFieldChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange} />
        </form>
        );
    }
}

export default MyForm;

只需创建一个回退到“if this.state.name为空”。

<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

这也适用于useState变量。

我也有同样的问题。 问题是当我保持状态信息空白

  const [name, setName] = useState()

我通过像这样添加空字符串来修复它

  const [name, setName] = useState('')