Question

我正在尝试更新状态值，但与此同时它给我一个错误TypeError: Cannot read property 'state' of undefined。当我在字段中键入内容然后单击提交时，出现此错误。我认为问这个问题可能很愚蠢，但请相信我，我是React的新手。有人能帮我解决这个问题，我真的需要解决我的问题。

谢谢

代码

//ModalComponent.js
import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import axios from "axios";

export default class ModalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modal: false, subject: "", taskType: "", notes: "" };
  }

  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  };
  handleSubject = e => {
    this.setState({ subject: e.target.value });
  };
  handleTaskType = e => {
    this.setState({ taskType: e.target.value });
  };
  handleNotes = e => {
    this.setState({ country: e.target.value });
  };

  handleSubmit(e) {
    e.preventDefault();
    const form = {
      subject: this.state.subject,
      taskType: this.state.taskType,
      notes: this.state.notes
    };
    let uri = "localhost:3000/api/diary/update";
    axios.post(uri, form, { params: { id: 347 } }).then(response => {
      this.setState({
        modal: !this.state.modal
      });
    });
  }

  render() {
    console.log(this.state.subject);
    return (
      <div>
        <h1>React Bootstrap Modal Example</h1>
        <Button color="success" onClick={this.toggle}>
          React Modal
        </Button>
        <Modal isOpen={this.state.modal}>
          <form onSubmit={this.handleSubmit}>
            <ModalHeader>IPL 2018</ModalHeader>
            <ModalBody>
              <div className="row">
                <div className="form-group col-md-4">
                  <label>Subject:</label>
                  <input
                    type="text"
                    name="subject"
                    value={this.state.subject}
                    onChange={this.handleSubject}
                    className="form-control"
                  />
                </div>
              </div>
              <div className="row">
                <div className="form-group col-md-4">
                  <select onChange={this.handleTaskType}>
                    <option>Select Task Type</option>
                    <option value="meeting">Meeting</option>
                    <option value="followUp">Follow Up</option>
                    <option value="reminder">Reminder</option>
                    <option value="other">Other</option>
                  </select>
                </div>
              </div>
              <div className="row">
                <div className="form-group col-md-4">
                  <label>Country:</label>
                  <input
                    type="text"
                    value={this.notes}
                    onChange={this.handleNotes}
                    className="form-control"
                  />
                </div>
              </div>
            </ModalBody>
            <ModalFooter>
              <input
                type="submit"
                value="Submit"
                color="primary"
                className="btn btn-primary"
              />
              <Button color="danger" onClick={this.toggle}>
                Cancel
              </Button>
            </ModalFooter>
          </form>
        </Modal>
      </div>
    );
  }
}

Answer 1

您必须告诉您的handleSubmit方法要使用哪个this。正如docs所说：

您必须小心JSX回调中的含义。在JavaScript中，默认情况下不绑定类方法。如果忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时将无法定义。

为此，您可以像这样在构造函数中bind handleSubmit：

constructor(props) {
    ...
    this.handleSubmit = this.handleSubmit.bind(this);
    ...
}

Answer 2

setState是异步的，因此有两种方法可以解决此问题，一种是在 handleSubmit 中使用箭头功能，第二种是绑定该功能。

下面的代码应该可以解决您的问题。

  handleSubmit = e => {
    e.preventDefault();
    const form = {
      subject: this.state.subject,
      taskType: this.state.taskType,
      notes: this.state.notes
    };
    let uri = "localhost:3000/api/diary/update";
    axios.post(uri, form, { params: { id: 347 } }).then(response => {
      this.setState({
        modal: !this.state.modal
      });
    });
  }

Answer 3

尝试一下

 constructor(props) {
    super(props);
    this.state = { modal: false, subject: "", taskType: "", notes: "" };
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleSubject = this.handleSubject.bind(this);
     this.handleTaskType = this.handleTaskType.bind(this);
     this.handleNotes = this.handleNotes.bind(this);
  }

TypeError：无法读取引导程序中未定义的属性“状态”

3 个答案: