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

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 属性而不是 value attr。因为当您将值设置为从 html 输入时，以后无法更改。

为您的输入元素执行此操作：

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

这里是关于问题的反应文档的来源：

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

Answer 2

发生错误是因为当您在 componentDidMount 中执行 setState 时，返回的值似乎是 undefined。

if(user.name!==undefined && user.email!==undefined){
    this.setState({
        name: user.name,
        email: undefined,
    })
}

这将防止状态中的值变为未定义，并且您将不再有该错误。