React类组件计算日期差提交时无法读取state报错如何解决

报错核心原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'state')错误是类组件内部自定义函数的this指向丢失导致的：你在saveGuests方法内定义的dateDifference是普通函数，独立调用时内部的this不会指向当前组件实例，自然无法读取this.state里的日期字段。

修复方案 #

方案1：改用箭头函数定义dateDifference #

箭头函数不会创建自己的this，会继承外层作用域的this指向，直接在saveGuests里用箭头函数定义计算方法即可，示例代码如下：

class BookingForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bookingDate: '',
      checkOutDate: '',
      // 其余表单字段
    };
    // 绑定saveGuests的this指向，也可直接将saveGuests定义为类属性箭头函数
    this.saveGuests = this.saveGuests.bind(this);
  }

  saveGuests() {
    // 箭头函数继承saveGuests的this指向，可正常访问this.state
    const dateDifference = () => {
      const { bookingDate, checkOutDate } = this.state;
      const startTime = new Date(bookingDate).getTime();
      const endTime = new Date(checkOutDate).getTime();
      // 时间差转天数，可根据业务需求调整为Math.round/Math.floor
      const diffDays = Math.ceil((endTime - startTime) / (1000 * 60 * 60 * 24));
      // 避免退房日期早于预订日期返回负数
      return diffDays > 0 ? diffDays : 0;
    };

    const postData = {
      ...this.state,
      days: dateDifference()
    };
    // 发送POST请求到后端接口逻辑
    fetch('/你的后端接口地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(postData)
    })
  }

  // 表单渲染、输入受控逻辑省略
}

方案2：直接在saveGuests作用域内计算 #

如果日期差计算逻辑不需要复用，可以直接在saveGuests内完成计算，不需要单独抽函数，从根源避免this指向问题：

saveGuests() {
  const { bookingDate, checkOutDate, ...restFields } = this.state;
  // 直接计算天数差
  const diffTime = new Date(checkOutDate).getTime() - new Date(bookingDate).getTime();
  const days = Math.ceil(diffTime / (1000 * 3600 * 24));
  const validDays = days > 0 ? days : 0;

  const postData = {
    bookingDate,
    checkOutDate,
    days: validDays,
    ...restFields
  };
  // 后续提交逻辑
}

注意事项 #

• 若saveGuests方法使用普通函数定义，必须在constructor中绑定this，或者直接写成类属性箭头函数：saveGuests = () => {}，避免方法本身的this指向丢失
• 提交前建议增加日期合法性校验，避免空值、日期顺序异常的问题
• 涉及时区业务时，建议统一转UTC时间计算差值，避免时区误差导致天数计算错误

内容的提问来源于stack exchange，提问作者Sandeep Roy