如何修复组件从文本类型的受控输入更改为不可控输入。Reactjs错误[重复]

Question

我已经将初始状态设置为空白，为什么我会遇到这个错误？接下来该换什么？我正在使用ID从数据库中获取用户，然后试图更新他们的值。我只在第一次尝试时得到这个错误。随后的尝试工作完美。后端会有问题吗？

import React, { Component } from 'react';
import axios from 'axios';
export default class EditUsers extends Component {
    constructor(props)
    {  
        super(props);

        this.onchangeUsername = this.onchangeUsername.bind(this);
        this.onchangeAddress = this.onchangeAddress.bind(this);
        this.onchangePhoneno = this.onchangePhoneno.bind(this);
        this.onSubmit = this.onSubmit.bind(this);


        this.state = {
            username:'',
            address:'',
            phoneno:''
        }
    }

    componentDidMount() {

        axios.get('http://localhost:5000/users/'+this.props.match.params.id)
        .then(response=>{
            this.setState({
                username:response.data.username,
                address:response.data.address,
                phoneno:response.data.phoneno,
            })

        })
        .catch(function (error) {
            console.log(error);

        })


    }

    onchangeUsername(e)
    {
        this.setState({
                username:e.target.value
        });
    }

    onchangeAddress(e)
    {
        this.setState({
                address:e.target.value
        });
    }

    onchangePhoneno(e)
    {
        this.setState({
                phoneno:e.target.value
        });
    }
    onSubmit(e){
        e.preventDefault();

        const user =
        {
            username:this.state.username,
            address:this.state.address,
            phoneno:this.state.phoneno

        }
        console.log(user);

        axios.post('http://localhost:5000/users/update/'+this.props.match.params.id,user)
        .then(res=>console.log(res.data));

        this.setState({
            username:this.props.username,
            address:this.props.address,
            phoneno:this.props.phoneno 
        })

    }
    render() 
    {
        return (
            <div>
              <h3>Edit User List</h3>
              <form onSubmit={this.onSubmit}>
                  <div className="form-group">
                      <label>Username: </label>
                      <input type="text" required
                      className="form-control"
                      value={this.state.username}
                      onChange={this.onchangeUsername}
                      />
                  </div>
                  <div className="form-group">
                      <label>Address: </label>
                      <input type="text" required
                      className="form-control"
                      value={this.state.address}
                      onChange={this.onchangeAddress}
                      />
                  </div>
                  <div className="form-group">
                      <label>Phoneno: </label>
                      <input type="text" required
                      className="form-control"
                      value={this.state.phoneno}
                      onChange={this.onchangePhoneno}
                      />
                  </div>
                  <div className="form-group">
                <input type="submit" value="Update" className="btn btn-primary" />
                  </div>
              </form>
            </div>
        );
    }
}

Answer 1

防止输入值为NULL。

如果从null传递到not null，则会累犯此错误。

一个快速的解决办法是这样做：

        <input
          type="text"
          required
          className="form-control"
          value={this.state.username || ''}
          onChange={this.onchangeUsername}
        />