Блог

Я извлекаю данные из MongoDB и пытаюсь отредактировать данные, но по какой-то причине моя форма не отображает значения в форме. Может ли кто-нибудь помочь мне понять, в чем я ошибаюсь? ниже приведен мой код для любой справки, почему значения формы не обновляются, используя this.state.job_title в качестве примера:

edit-job.component.js

 import React, { Component } from "react"; import axios from "axios"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css";  export default class EditJob extends Component {  constructor(props) {  super(props);   this.onChangeUsername = this.onChangeUsername.bind(this);  this.onChangeJob_title = this.onChangeJob_title.bind(this);  this.onChangejob_comp_image = this.onChangejob_comp_image.bind(this);  this.onChangejob_comp_name = this.onChangejob_comp_name.bind(this);  this.onChangejob_description = this.onChangejob_description.bind(this);  this.onChangejob_location = this.onChangejob_location.bind(this);  this.onChangejob_field = this.onChangejob_field.bind(this);  this.onChangeDatejob_closing_date =  this.onChangeDatejob_closing_date.bind(this);  this.onSubmit = this.onSubmit.bind(this);   this.state = {  username: "",  job_title: "",  job_comp_image: "",  job_comp_name: "",  job_description: "",  job_location: "",  job_field: "",  job_closing_date: new Date(),  users: [],  };  }   componentDidMount() {  //GET CURRENT JOB LISTING TO EDIT  if (this.props.match amp;amp; this.props.match.params.id) {  axios  .get("http://localhost:5001/jobs/"   this.props.match.params.id)  .then((response) =gt; {  console.log(response.data);  this.setState({  username: response.data.username,  job_title: response.data.job_title,  job_comp_image: response.data.job_comp_image,  job_comp_name: response.data.job_comp_name,  job_description: response.data.job_description,  job_location: response.data.job_location,  job_field: response.data.job_field,  job_closing_date: new Date(response.data.job_closing_date),  });  })  .catch(function (error) {  console.log(error);  });  }  axios  .get("http://localhost:5001/users/")  .then((response) =gt; {  if (response.data.length gt; 0) {  this.setState({  users: response.data.map((user) =gt; user.username),  });  }  })  .catch((error) =gt; {  console.log(error);  });  }   onChangeUsername(e) {  this.setState({  username: e.target.value,  });  }   //Update user with new username entered by user  onChangeJob_title(e) {  this.setState({  job_title: e.target.value,  });  }   onChangejob_comp_image(e) {  this.setState({  job_comp_image: e.target.value,  });  }   onChangejob_comp_name(e) {  this.setState({  job_comp_name: e.target.value,  });  }   onChangejob_description(e) {  this.setState({  job_description: e.target.value,  });  }   onChangejob_location(e) {  this.setState({  job_location: e.target.value,  });  }   onChangejob_field(e) {  this.setState({  job_field: e.target.value,  });  }   onChangeDatejob_closing_date(job_closing_date) {  this.setState({  job_closing_date: job_closing_date,  });  }   onSubmit(e) {  e.preventDefault();   const job = {  username: this.state.username,  job_title: this.state.username,  job_comp_image: this.state.job_comp_image,  job_comp_name: this.state.job_comp_name,  job_description: this.state.job_description,  job_location: this.state.job_location,  job_field: this.state.job_field,  job_closing_date: new Date(),  };   console.log(job);   axios  .post(  "http://localhost:5001/jobs/update/"   this.props.match.params.id,  job  )  .then((res) =gt; console.log(res.data));   window.location = "/";  }   render() {  const Headerstyle = {  marginTop: "40px",  };  return (  lt;div style={Headerstyle}gt;  lt;h3gt;Edit Exercise Loglt;/h3gt;  lt;form onSubmit={this.onSubmit}gt;  lt;div className="form-group"gt;  lt;labelgt;Username: lt;/labelgt;  lt;select  UseRef="userInput"  required  className="form-control"  value={this.state.username}  onChange={this.onChangeUsername}  gt;  {this.state.users.map(function (user) {  return (  lt;option key={user} value={user}gt;  {user}  lt;/optiongt;  );  })}  lt;/selectgt;  lt;/divgt;  lt;div className="form-group"gt;  lt;labelgt;Job Title: lt;/labelgt;  lt;input  type="text"  required  className="form-control"  value={this.state.job_title}  onChange={this.onChangeJob_title}  /gt;  lt;/divgt;  lt;div className="form-group"gt;  lt;labelgt;Company Image: lt;/labelgt;  lt;input  type="text"  className="form-control"  value={this.state.job_comp_image}  onChange={this.onChangejob_comp_image}  /gt;  lt;/divgt;  lt;div className="form-group"gt;  lt;labelgt;Company Name: lt;/labelgt;  lt;input  type="text"  className="form-control"  value={this.state.job_comp_name}  onChange={this.onChangejob_comp_name}  /gt;  lt;/divgt;   lt;div className="form-group"gt;  lt;labelgt;Job Description: lt;/labelgt;  lt;input  type="text"  className="form-control"  value={this.state.job_description}  onChange={this.onChangejob_description}  /gt;  lt;/divgt;  lt;div className="form-group"gt;  lt;labelgt;Job Location: lt;/labelgt;  lt;input  type="text"  className="form-control"  value={this.state.job_location}  onChange={this.onChangejob_location}  /gt;  lt;/divgt;   lt;div className="form-group"gt;  lt;labelgt;Job related field: lt;/labelgt;  lt;input  type="text"  className="form-control"  value={this.state.job_field}  onChange={this.onChangejob_field}  /gt;  lt;/divgt;  lt;div className="form-group"gt;  lt;labelgt;Job Closing Date: lt;/labelgt;  lt;divgt;  lt;DatePicker  selected={this.state.job_closing_date}  onChange={this.onChangeDatejob_closing_date}  /gt;  lt;/divgt;  lt;/divgt;   lt;div className="form-group"gt;  lt;input  type="submit"  value="Edit Job Listing"  className="btn btn-primary"  /gt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  );  } }