时间戳

首页 > 解决方案 > 如何修复组件正在从类型文本的受控输入变为不受控制。Reactjs 错误

reactjs - 如何修复组件正在从类型文本的受控输入变为不受控制。Reactjs 错误

问题描述

我已将初始状态设置为空白，但为什么会遇到此错误？接下来我应该改变什么？我正在使用 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>
        );
    }
}

标签： reactjs

解决方案

防止您的输入值为空。

如果您从null传递到not null，您将收到此错误。

一个快速的解决方法可能是这样做：

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

推荐阅读