Question

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

警告：组件正在更改要控制的电子邮件类型的不受控制的输入。输入元素不应从不受控制切换到受控制（或反之亦然）。决定在组件的使用寿命期间使用受控或不受控制的输入元件。更多信息在输入中（由编辑创建）在div中（由Edit创建）在div中（由Edit创建）在表单中（由编辑创建）在div中（由Edit创建）在编辑

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

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

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

这样可以防止状态中的值变得不确定，并且您不会再出现该错误。

Answer 2

您正在使用value属性在渲染时设置默认值，它会使您的输入受控输入，然后在更新状态时，您尝试再次更改输入值，这将使其不受控制。基本上为了使您的代码成功，您需要在渲染代码中使用defaultValue属性而不是值attr。因为当您从html设置值输入时，以后无法更改。

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

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

这是来自问题的反应文档的来源：

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

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

2 个答案: