Question

因此，我有一个返回200代码的组件，但是由于某些原因，单击提交按钮后，内容根本没有更新。我的目标是在提交表单后更新表单内的4个div。课程状态包含的属性包含有关每门课程的信息，这些属性是_id，描述，估计时间，materialsNeeded和title。

有人可以帮忙吗？

class UpdateCourse extends Component {
  constructor(props) {
    super(props);
    this.state = {
      course: []
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  change = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleSubmit = event => {
    const {
      match: { params }
    } = this.props;
    event.preventDefault();

    const updateCourse = {
      title: this.state.course.title,
      description: this.state.course.description,
      estimatedTime: this.state.course.estimatedTime,
      materialsNeeded: this.state.course.materialsNeeded
    };

    axios({
      method: "put",
      url: `http://localhost:5000/api/courses/${params.id}`,
      auth: {
        username: window.localStorage.getItem("Email"),
        password: window.localStorage.getItem("Password")
      },
      data: updateCourse
    })
      .then(response => {
        //if the response came back as 204 then alert the user that the course was successfully updated, if another code came back then redirect them to the error handler
        if (response.status === 204) {
          alert("The course has been successfully updated!");
          this.props.history.push("/");
        } else {
          throw new Error();
        }
      })
      .catch(err => {
        //use a catch method to catch the errors and display them is the status code comes back as 400
        console.log("CATCH =", err.response.data.errors);
        this.setState({
          //if there were errors, then set the errors state in react to the error messages that came from the REST API
          errors: err.response.data.errors
        });
      });
  };

  componentDidMount() {
    const {
      match: { params }
    } = this.props;
    axios
      .get(`http://localhost:5000/api/courses/${params.id}`)
      .then(results => {
        this.setState({
          course: results.data
        });
      });
  }

  render() {
    return (
      <div>
        <div>
          <form onSubmit={this.handleSubmit}>
            <div>
              <input
                id="title"
                name="title"
                type="text"
                className="input-title course--title--input"
                placeholder="Course title..."
                defaultValue={this.state.course.title}
                onChange={e => this.change(e)}
              />
            </div>
            <div>
              <textarea
                id="description"
                name="description"
                placeholder={this.state.course.description}
                defaultValue={this.state.course.description}
                onChange={e => this.change(e)}
              />{" "}
            </div>
            <div>
              <input
                id="estimatedTime"
                name="estimatedTime"
                type="text"
                className="course--time--input"
                placeholder="Hours"
                defaultValue={this.state.course.estimatedTime}
                onChange={e => this.change(e)}
              />
            </div>
            <div>
              <textarea
                id="materialsNeeded"
                name="materialsNeeded"
                placeholder={this.state.course.materialsNeeded}
                defaultValue={this.state.course.materialsNeeded}
                onChange={e => this.change(e)}
              />
            </div>
          </form>
        </div>
      </div>
    );
  }
}

Answer 1

请对此进行更新：

constructor(props) {
  super(props);
  this.state = {
    course: {}
  };
  this.handleSubmit = this.handleSubmit.bind(this);
  this.change = this.change.bind(this);
}

change = e => {
  const obj = { [e.target.name]: e.target.value };
  const course = Object.assign({}, this.state.course, obj);
  this.setState({
    course
  });
};

AXIOS PUT请求返回200代码，但是不更新内容吗？

1 个答案: