Question

所以我正在创建更新表格，但出现此错误

index.js：1375警告：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控状态切换到非受控状态（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。

下面有我的editfrom.js和我的app.js，我相信它们是导致问题的文件中的东西

edit.js

import React, {Component} from 'react';
import './App.css';
import axios from 'axios';
export default class EditStudent extends Component {
constructor(props) {
  super(props)
  this.ChangeID = this.ChangeID.bind(this);
  this.ChangeRoleNumber = this.ChangeRoleNumber.bind(this);
  this.ChangeFirstName= this.ChangeFirstName.bind(this);
  this.ChangeLastName = this.ChangeLastName.bind(this);
  this.ChangeMarks = this.ChangeMarks.bind(this);
  this.Enter =  this.Enter.bind(this);

  this.state = {
     _id: '',
     role_num: '',
     first_name: '',
     last_name: '',
     marks: ''

  }
}
componentDidMount() {
axios.get('http://localhost:3200/students/student_info/'+ this.props.match.params.id)

.then(res => {
              this.setState({
                _id: res.data._id,
                role_num: res.data.role_num,
                first_name: res.data.first_name,
                 last_name: res.data.last_name,
                 marks: res.data.marks
               });
          })
          .catch(err => {
              console.log(err);

   })
}
 ChangeID(a) {
 this.setState({
   _id: a.target.value
 })
}

ChangeRoleNumber(a) {
  this.setState({
    role_num: a.target.value
  })
}

ChangeFirstName(a) {
  this.setState({
    first_name: a.target.value
  })
}
ChangeLastName(a) {
  this.setState({
    last_name: a.target.value
  })
}
ChangeMarks(a) {
  this.setState({
    marks: a.target.value
  })
}
Enter(a) {
a.preventDefault();

const myob = {
  _id: this.state._id,
  role_num: this.state.role_num,
  first_name: this.state.first_name,
  last_name: this.state.last_name,
  marks: this.state.marks

};
axios.post('http://localhost:3200/students/updateStudent',  {
  '_id':this.props.match.params._id ,
  myob
})
.then(err => console.log(err.data));
  this.props.history.push('/getstudents');
}

  render() {
return(
  <div style={{marginTop:50}}>
      <h2>Update Student</h2>
      <form onSubmit={this.Enter}>
        <div className = 'form-group'>
           <label>Enter ID: </label>
           <input type = "text" className ='form-control' value= {this.state._id} onChange={this.ChangeID}
           />

          </div>
          <div className = 'form-group'>
             <label>Enter Role Number: </label>
             <input type = "text" className ='form-control'  value= {this.state.role_num} onChange={this.ChangeRoleNumber} />
            </div>
            <div className = 'form-group'>
               <label>Enter First Name : </label>
               <input type = "text" className ='form-control'value= {this.state.first_name} onChange={this.ChangeFirstName}/>
              </div>
              <div className = 'form-group'>
                 <label>Enter Last Name: </label>
                 <input type = "text" className ='form-control'value= {this.state.last_name} onChange={this.ChangeLastName}/>
                </div>
                <div className = 'form-group'>
                   <label>Enter Marks: </label>
                   <input type = "text" className ='form-control'value= {this.state.marks} onChange={this.ChangeMarks}/>
                  </div>
                  <div className = 'form-group'>
                     <input type = "submit" className ='btn btn-primary'value= "Edit Student"/>
                    </div>

      </form>

  </div>

)
}
}

和我的App.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import EditStudent from './editform';
import StudentForm from './form';
import GetStudents from './getstudents';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <Link to={'/'} className="navbar-brand">Student Attendance</Link>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav mr-auto">
              <li className="nav-item">
                  <Link to={'/'} className="nav-link">My Home</Link>
                </li>
                <li className="nav-item">
                  <Link to={'/form'} className="nav-link">StudentForm</Link>
                </li>
                <li className="nav-item">
                  <Link to={'/getstudents'} className="nav-link">GetStudents</Link>
                </li>
              </ul>
            </div>
          </nav>
          <Switch>
              <Route exact path='/form' component={ StudentForm } />
              <Route path='/editform/:id' component={ EditStudent } />
              <Route path='/getstudents' component={ GetStudents } />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Answer 1

尝试使用input更新您的value= {this.state._id || ''}标签，并检查一次。.它可能会消除该警告。

组件更换控制输入

1 个答案: