javascript - 警告 : A component is changing an uncontrolled input of type text to be controlled

Question

完整错误:组件正在将不受控制的文本类型输入更改为受控制。输入元素不应从不受控制切换到受控(反之亦然)我的代码:

//Form.js
componentDidMount = () => {
    let state = {};
    const { inputProps } = this.props;
    //example for inputProps: {
    //    {nameInput: {element: Input/*Input.js*/, value: "initial value"}}
    //}
    Object.keys(inputProps).forEach(key => {
        const input = inputProps[key];
        const { value } = input;
        state[key] = {
            ...input,
            value,
            onChange: this.inputChange(key)
        }
    })
    this.setState(state)
}
inputChange = key => event => this.setState({
    [key]: {
        ...this.state[key],
        value: event.target.value
    }
})
inputs = () => Object.keys(this.state).map(key => {
    const input = this.state[key];
    const { element, typeCheck, ...props } = input;
    return React.createElement(element, props);
})
//Input.js
//the error comes after typeChecking in Form.js I just didn't wanted to show unnecessary code
const Input = ({error, ...props}) => <div className="inputContainer">
    {React.createElement("input", props)}
    <p className="inputError">{error || ""}</p>
</div>

所以这里发生的是我有一个组件 Form 它接受一个对象，因为它是定义需要创建哪些输入的 Prop 。挂载后，它会处理输入属性并将其设置为状态。这有点偷偷摸摸，因为我们可能会获得值(value)作为输入的支柱，但我们将其放入表单的状态。此外，我们还将值赋予 Input 元素，因此它受到控制，如果输入发生变化，则触发在 Form 中调用的函数，并将值设置为它自己的状态，然后将更新后的值返回给 Input .所以看起来输入是受控的，但我仍然得到错误。一切正常，所以输入获取更新的值，并发送更改的输入，我只是收到错误，这很烦人。

Answer 1

如果输入值初始化为 null 或 undefined，您将始终收到此错误。您可以通过将输入值设置为空字符串来避免它。