未处理的拒绝（TypeError）：无法读取未定义的属性（读取“状态”）答案

【问题标题】：Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'state')未处理的拒绝（TypeError）：无法读取未定义的属性（读取“状态”）
【发布时间】：2021-12-27 16:06:45
【问题描述】：

我尝试使用 onSubmit 函数传递状态值，但它返回一个未处理的错误，我找不到错误是什么请帮我解决这个问题

反应代码：

import React, { Component } from 'react'
import 'bootstrap/dist/css/bootstrap.css';
import { DateRangePicker } from 'rsuite';
import moment from 'moment'
export default class DateComponent extends Component {
  constructor() {
    super();
    this.state = {
      datefilter: [],
      startDate: "",
      endDate: ""

    }
    this.handleChange = this.handleChange.bind(this);
  
  }

  handleChange(start) {
   
    console.log()
    this.setState({
      startDate: start[0],
      endDate: start[1]
    })
    
  }

  async componentDidMount() {
    
    if (this.state.startDate == '') {
   
      console.log(Object.keys(moment(this.state.startDate).format('yyyy-MM-DDTHH:mm:ss')).length)
      const response = await fetch('http://localhost:8081/items');
      const data = await response.json();
     
      this.setState({ datefilter: data })
    }

  }

  async onFormSubmit()  {
    
  var start = moment(this.state.startDate).format('yyyy-MM-DDTHH:mm:ss');
  var end = moment(this.state.endDate).format('yyyy-MM-DDTHH:mm:ss');
 console.log(Object.keys(moment(this.state.startDate).format('yyyy-MM-DDTHH:mm:ss')).length)
 console.log(start,end)
  var startDate = new Date(start).getTime();
  var endDate = new Date(end).getTime();
  const response = await fetch('http://localhost:8081/items');
  const data = await response.json();
  var result = data.filter(d => {
    var time = new Date(d.Date).getTime();
    return (startDate < time && time < endDate);
  });
  console.log(result);
  this.setState({ datefilter: result })

 }
  render() {
    const datefilter = this.state.datefilter
    return (
      <div>
        <form onSubmit={this.onFormSubmit}> 
        <DateRangePicker
         format="yyyy-MM-dd HH:mm:ss"
          onChange={this.handleChange} 
          onOk={this.onFormSubmit}
          placeholder="Enter Date and Time" 
          />
        </form>
    
 
        <table class="table">
          <thead class="thead-dark">
            <tr>
              <th scope="col">Item ID</th>
              <th scope="col">Item Name</th>
              <th scope="col">Status</th>
              <th scope="col">Date</th>
            </tr>
          </thead>
          <tbody>
            {datefilter.map(table => (
              <tr>
                <td>{table.ID}</td>
                <td>{table.ItemName}</td>
                <td>{table.Status}</td>
                <td>{table.Date}</td>
              </tr>
            ))}
          </tbody>
        </table>
       
      
      </div>
    )
  }
}

上面的代码是表格过滤代码，如果状态为空则返回所有，如果有值则返回onFormSubmit函数。我尝试了很多，但由于我是新来的反应而无法找到。我需要这个社区来帮助我

【问题讨论】：

标签： javascript arrays reactjs unhandled-exception

【解决方案1】：

也是 JS 的新手。因此，请谨慎使用以下内容。

async onFormSubmit()  {
    
  var start = moment(this.state.startDate).format('yyyy-MM-DDTHH:mm:ss');
  var end = moment(this.state.endDate).format('yyyy-MM-DDTHH:mm:ss');
 console.log(Object.keys(moment(this.state.startDate).format('yyyy-MM-DDTHH:mm:ss')).length)
 console.log(start,end)

请您尝试以下步骤：

将“开始”和“结束”硬编码到某个时间戳。
然后看看这个错误是否仍然存在。

为什么？错误如下：

"...无法读取未定义读取的属性 ('state')"

表示必须有某种形式的对象（可能是“this.state”），其中

状态

应该是一个属性，但该对象根本没有定义。

如果我是你，我会尝试添加以下行

this.onFormSubmit = this.onFormSubmit.bind(this)

就在下面

this.handleChange = this.handleChange.bind(this);

关于构造方法。

【讨论】：