React中使用Moment.js修改setState小时值遇延迟问题求助

我之前也碰到过一模一样的问题，核心其实是React setState的异步特性加上Moment.js对象的可变性在搞鬼，咱们一步步来搞定它：

问题根源拆解 #

1. setState的异步坑：React的setState不是同步更新state的，当你直接用this.state.currentTime时，大概率拿到的还是更新前的旧值——相当于你一直基于旧时间修改，自然会出现"延迟"的错觉。
2. Moment对象的可变性：Moment.js的set()方法会直接修改原对象，你把修改后的原对象放回state，React因为检测不到引用变化，可能不会触发重新渲染，看起来就像state没更新。

修复后的代码 #

把你的事件处理函数改成这样就行：

handleKeyDownPickerInput(e, type) { 
  let input = e.target.value; 
  if (!input || isNaN(input)) return; 
  if (type === "hour") { 
    // 用函数式更新拿最新state，同时克隆moment对象避免修改原数据
    this.setState(prevState => ({
      currentTime: moment(prevState.currentTime).set({ h: Number(input) })
    })); 
  } 
}

关键改动说明 #

• 函数式更新：用prevState => ...代替直接访问this.state，确保拿到的是最新的state值，彻底避开setState异步带来的旧值问题。
• 克隆Moment实例：moment(prevState.currentTime)会创建一个全新的moment对象，再对新对象做set操作，原state里的对象不会被改动，React能准确检测到state变化并触发重新渲染。
• 字符串转数字：输入框的value是字符串类型，而Moment的h参数需要数字，用Number(input)转换一下，避免出现解析异常。

可选：验证更新结果 #

要是想确认state真的更新了，可以在setState的回调里打印结果：

this.setState(prevState => ({
  currentTime: moment(prevState.currentTime).set({ h: Number(input) })
}), () => {
  console.log('更新后的时间:', this.state.currentTime.format('HH:mm'));
});

这样改完之后，state的更新应该就不会有延迟了，你可以试试～

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