Javascript TypeError:无法读取属性'；州'；bootstrap中未定义的

我试图更新状态值，但同时它给了我一个错误，

TypeError:无法读取未定义的属性“state”。当我在字段中键入一些内容，然后单击submit时，我收到了这个错误。我想问这个问题可能很愚蠢，但相信我，我是个新来的反应者。谁能帮我解决这个问题，我真的需要解决我的问题

谢谢

代码

//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>
    );
  }
}

//ModalComponent.js
从“React”导入React；
从“reactstrap”导入{Button，Modal，ModalHeader，ModalBody，ModalFooter}；
从“axios”导入axios；
导出默认类ModalComponent扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={modal:false，subject:，taskType:，notes:}；
}
切换=（）=>{
这是我的国家({
模态：！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、 预防默认值（）；
常数形式={
主题：this.state.subject，
taskType:this.state.taskType，
备注：this.state.notes
};
let uri=“localhost:3000/api/diary/update”；
post（uri，form，{params:{id:347}}）。然后（response=>{
这是我的国家({
模态：！this.state.modal
});
});
}
render（）{
console.log（this.state.subject）；
返回(
React引导模式示例
反应模态
IPL 2018
主题：
选择任务类型
会合
跟进
提醒
其他
国家：
取消
);
}
}
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
      });
    });
  }

你必须告诉你的
handleSubmit
方法你想使用哪个
this
。
俗话说：

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

要做到这一点，您可以像下面这样在构造函数中
绑定
handleSubmit
：

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

试试这个

 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);
  }

您在哪一行收到错误？您只需要对
handleSubmit
执行此操作，因为其他操作都是lambda函数，无法手动执行bound@apokryfos答案是正确的。