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

Question

I tried to pass the state value using onSubmit function but it returns an Unhandled error which i couldn't find what the error is Kindly help me with this

React Code:

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

the above code is the table filter code if the state is null it returns all if it has value then it returns onFormSubmit function. I tried to a lot but couldn't find out since im new to react. i need this community to help me

Answer 1

Also new to JS. So, please take below with caution.

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)

Would you please try following steps:

1. Hard-code the 'start' and 'end' to some time-stamp.
2. And see if that error persists.

Why? The error, as it reads:

"... Cannot read properties of undefined reading ('state')"

• indicates that there must be some form of an object (may be "this.state") where

state

is expected to be a property, but that object is simply not defined.

If I were you, I will try to add below line

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

just below

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

on the constructor method.