React中使用LocalStorage存储TextField日期值并设为重载后默认值

• setState异步问题：setDateBegin 是异步更新方法，调用后立刻读取dateBegin拿到的还是更新前的旧值，导致存入localStorage的是错误数据
• 存储格式问题：Date对象直接存入localStorage会被序列化为普通字符串，无法直接被date类型的TextField识别使用，date类型输入框要求的值格式为YYYY-MM-DD的字符串
• 缺少状态绑定与初始化读取：当前没有给TextField绑定value属性，也没有在组件初始化时从localStorage读取已存储的日期作为初始值

// 初始化时优先从localStorage取值，无值则用当前日期，统一转成YYYY-MM-DD格式
const getDefaultDate = () => {
  const savedDate = localStorage.getItem('@legis/datebegin')
  if (savedDate) return savedDate
  // 本地时区的当前日期格式化逻辑，避免时区偏移问题
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

const [dateBegin, setDateBegin] = React.useState(getDefaultDate)

// TextField组件部分
<TextField
  id="date"
  label="Início "
  type="date"
  value={dateBegin} // 绑定状态值，转为受控组件
  multiline={false}
  onChange={(e) => {
    const newDate = e.target.value
    setDateBegin(newDate)
    localStorage.setItem('@legis/datebegin', newDate) // 直接存储标准格式字符串
  }}
  InputLabelProps={{
    color:'secondary',
    className:"DatePicker",
    style : {color:"#ffff",},
    shrink: true,
  }}
  inputProps={{
    style: { color: "#ffff" },
  }}
/>

• 初始化时通过getDefaultDate方法优先读取localStorage中存储的日期，没有存储值时才生成当前日期的标准格式字符串作为默认值
• onChange回调中直接使用输入框返回的YYYY-MM-DD格式字符串，同步更新state和localStorage，避免异步问题和格式转换错误
• 给TextField绑定value属性，将组件转为受控组件，保证状态和显示完全同步

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