React状态属性未更新求助：使用rc-time-picker时状态值为undefined

嘿，我一眼就瞅出问题出在哪啦——localStorage.setItem()这个方法本身是没有返回值的（执行后会返回undefined），你直接把它的结果赋值给state的value字段，自然就会导致this.state.value一直是undefined了。咱们一步步来修复：

第一步：修正newHandleChange方法 #

先把格式化后的时间值存下来，再分别完成localStorage存储和state更新：

newHandleChange=(value)=>{
  // 先把moment对象格式化为需要的字符串
  const formattedTime = value.format('h:mm a');
  // 存到localStorage
  localStorage.setItem("currentTime", formattedTime);
  // 再更新state
  this.setState({
    value: formattedTime
  })
}

第二步：组件初始化时读取localStorage的值 #

这样页面刷新后，之前选择的时间也能保留在state里：

constructor(){
  super();
  // 从localStorage读取已保存的时间，没有的话用默认空值
  const savedTime = localStorage.getItem("currentTime") || '';
  this.state={
    value : savedTime
  }
}

完整修改后的代码 #

import 'rc-time-picker/assets/index.css';
import React, { Component } from 'react';
import TimePicker from 'rc-time-picker';
import moment from 'moment';
const format = 'h:mm a';
const now = moment().hour(0).minute(0);

class Time extends Component {
  constructor(){
    super();
    // 初始化时读取localStorage的内容
    const savedTime = localStorage.getItem("currentTime") || '';
    this.state={
      value : savedTime
    }
  }

  newHandleChange=(value)=>{
    const formattedTime = value.format('h:mm a');
    localStorage.setItem("currentTime", formattedTime);
    this.setState({
      value: formattedTime
    })
    // 如果需要立即获取更新后的state，要用setState的回调函数
    // this.setState({ value: formattedTime }, () => {
    //   console.log('更新后的state:', this.state.value);
    // })
  }

  render(){
    console.log("state data",this.state.value)
    return(
      <div>
        <TimePicker
          showSecond={false}
          defaultValue={now}
          className="xxx"
          onChange={this.newHandleChange}
          format={format}
          use12Hours
          inputReadOnly
          fieldName="time"
          // 可选：把当前state的值设为TimePicker的value，保持组件与state同步
          value={this.state.value ? moment(this.state.value, format) : now}
        />
      </div>
    )
  }
}

export default Time;

额外小提示 #

• 如果需要在setState之后立即获取更新后的state，记得用setState的第二个参数（回调函数），因为setState是异步的，直接在后面打印可能还是旧值。
• 给TimePicker加上value属性，把state里的时间转成moment对象传进去，能让组件显示和state完全同步。

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