一个组件正在更改要控制的电子邮件类型的未控制输入。输入元素不应从非受控切换到受控

Question

我得到了这个错误，我是新的反应。我看过其他帖子，但仍然不能解决这个问题。我们将不胜感激。谢谢

警告：组件正在更改要控制的电子邮件类型的未控制输入。输入元素不应该从不受控制切换到受控制（反之亦然）。决定在组件的生存期内使用受控还是不受控的输入元素。更多信息在输入（由编辑创建）中，在div（由编辑创建）中，在div（由编辑创建）中，在窗体（由编辑创建）中，在div（由编辑创建）中

import React from 'react'
import ReactDom from 'react-dom'

export default class Edit extends React.Component{
    constructor(){
        super();
        this.state={
            name: '',
            email: '',
            password: '',
        };

    }

componentWillMount(){
    let id=this.props.id;
    axios.get('/api/users/'+id).then(response => {
        var user= response.data;

        this.setState({
            name: user.name,
            email: user.email,
        })
    }).catch(error => {
        console.log(error)
    })
}

handleNameChange(e){
    this.setState({
        name: e.target.value
    })
}

handleEmailChange(e){
    this.setState({
        email: e.target.value
    })
}

handlePasswordChange(e){
    this.setState({
        password: e.target.value
    })
}

handleSubmit(e){
    e.preventDefault();
    console.log(this.state)

    axios.post('/api/users',this.state).then(response => {
        console.log(response)
    }).then(error => {
        console.log(error)
    })
}

    render(){
        return(
            <div> 
            <h2> Add New User </h2>


            <form className="form-horizontal" onSubmit={this.handleSubmit.bind(this)}>
                 <div className="form-group">
                    <label className="control-label col-sm-2" htmlFor="email">Name:</label>
                    <div className="col-sm-10">
                      <input type="text" className="form-control" id="name" placeholder="Enter name" value={this.state.name}
                       onChange={ this.handleNameChange.bind(this) }/>
                    </div>
                  </div>

                  <div className="form-group">
                    <label className="control-label col-sm-2" htmlFor="email">Email:</label>
                    <div className="col-sm-10">
                      <input type="email" className="form-control" id="email" placeholder="Enter email" value={this.state.email}
                       onChange={ this.handleEmailChange.bind(this) }/>
                    </div>
                  </div>

                   <div className="form-group">
                    <label className="control-label col-sm-2" htmlFor="email">Password:</label>
                    <div className="col-sm-10">
                      <input type="password" className="form-control" id="password" placeholder="Enter password" value={this.state.password}
                        onChange={ this.handlePasswordChange.bind(this) }/>
                    </div>
                  </div>

                <div className="form-group">
                    <button type="submit" className="btn btn-default">Update</button>   
                </div>


        </form>

        </div>
            )
        }
}

if (document.getElementById('edit')) {
    var id=$("#edit").data("id");
ReactDom.render(<Edit id={id}/>, document.getElementById('edit'))
}

Answer 1

您使用value属性来设置呈现时的默认值，它使您的输入受到控制，然后在更新状态时，您试图再次更改输入值，这将使其不受控制。基本上，为了使代码成功，您需要在呈现的代码中使用defaultValue属性，而不是值ATTR。因为当您将值设置为从html输入时，以后不能更改它。

对输入元素执行以下操作：

<input type="email" className="form-control" id="email" placeholder="Enter email" defaultValue={this.state.email} />

以下是react文档中关于问题的一个来源：

https://reactjs.org/docs/uncontroll-components.html