setState使用变量校验：解决拆分日期输入的非受控转受控报错问题

错误原因 #

• 当dateInputValue为undefined、null或空字符串时，直接调用split("-")会返回长度不足3的数组，解构得到的initialMonth、initialYear会是undefined
• React输入框的value属性如果初始值为undefined，会被识别为非受控组件；后续值更新为字符串时，就会触发「非受控组件转为受控组件」的控制台警告

修正代码 #

// 先对dateInputValue做空值兜底，解构时给每个字段加空字符串默认值
const [initialDay = "", initialMonth = "", initialYear = ""] = (dateInputValue || "").split("-");
const [day, setDay] = useState(initialDay);
const [month, setMonth] = useState(initialMonth);
const [year, setYear] = useState(initialYear);

优化说明 #

• (dateInputValue || "") 处理了dateInputValue为空的场景，避免空值调用split方法报错
• 解构赋值时给每个变量添加默认值""，即便split返回的数组长度不足3，剩余变量也会默认取空字符串，不会出现undefined的情况
• 三个状态的初始值永远为字符串类型，输入框的value从始至终都是确定值，彻底避免触发非受控转受控的警告
• 顺带注意原代码中的intialDay存在拼写错误，正确拼写为initialDay，避免后续调用变量时出现未定义报错

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