TypeScript React中Select onChange结合useState状态更新延迟问题求助

问题根源 #

React中useState的setter函数是异步批量更新的，你在调用setStartTime(time)后立刻执行calculateTotalHours()时，组件还未完成状态更新，calculateTotalHours里读取的startTime/endTime依然是更新前的旧值——初始时startTime为空字符串，第一次调用时startTime.split(":")[0]会报错，所以输出NaN；第二次调用时拿到的是第一次更新后的旧值，这就是你看到的“总是获取上一次状态”的原因。

修复方案 #

方案1：直接传递最新时间值到计算函数 #

不依赖状态，把handle函数中拿到的最新时间值直接传给计算函数，确保计算用的是实时更新的时间：

修改handle函数：

const handleStartTimeChange = (time: string) => {
    setStartTime(time);
    calculateTotalHours(time, endTime); // 传入最新startTime和当前endTime
}

const handleEndTimeChange = (time: string) => {
    setEndTime(time);
    calculateTotalHours(startTime, time); // 传入当前startTime和最新endTime
}

修改计算函数，改用传入的参数而非状态：

const calculateTotalHours = (start: string, end: string) => {
    console.log(start, end);
    let startTimeValue = parseInt(start.split(":")[0]);
    let endTimeValue = parseInt(end.split(":")[0]);
    
    if (startTimeValue === 12) {
        startTimeValue -= 12;
    }
    if (endTimeValue === 12) {
        endTimeValue -= 12;
    }
    
    if (start.includes("PM")) {
        startTimeValue += 12;
    }
    if (end.includes("PM")) {
        endTimeValue += 12;
    }
    
    let total = endTimeValue - startTimeValue;
    // 修正原错误：判断当前计算的total而非旧状态totalHours
    if (total < 0) {
        total = 0;
    }
    setTotalHours(total);
}

方案2：使用useEffect监听状态变化 #

利用useEffect监听startTime和endTime的变化，等状态更新完成后自动触发计算，此时能拿到最新的状态值：

先导入useEffect：

import { useState, useEffect } from 'react';

添加监听逻辑：

useEffect(() => {
    // 确保两个时间都有值再计算
    if (startTime && endTime) {
        calculateTotalHours();
    }
}, [startTime, endTime]); // 依赖数组：状态变化时执行回调

修改handle函数，移除直接调用计算函数的代码：

const handleStartTimeChange = (time: string) => {
    setStartTime(time);
}

const handleEndTimeChange = (time: string) => {
    setEndTime(time);
}

修正计算函数的错误逻辑：

const calculateTotalHours = () => {
    console.log(startTime, endTime);
    let startTimeValue = parseInt(startTime.split(":")[0]);
    let endTimeValue = parseInt(endTime.split(":")[0]);
    
    if (startTimeValue === 12) {
        startTimeValue -= 12;
    }
    if (endTimeValue === 12) {
        endTimeValue -= 12;
    }
    
    if (startTime.includes("PM")) {
        startTimeValue += 12;
    }
    if (endTime.includes("PM")) {
        endTimeValue += 12;
    }
    
    let total = endTimeValue - startTimeValue;
    if (total < 0) {
        total = 0;
    }
    setTotalHours(total);
}

额外细节优化 #

• 初始状态startTime和endTime设为空字符串可能导致第一次计算报错，建议设为默认时间选项：

const [startTime, setStartTime] = useState("12:00AM")
const [endTime, setEndTime] = useState("12:00AM")

• 表单中totalHours标签需要渲染状态值，修改为：

<label>
    totalHours: {totalHours}
</label>

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