React表单复选框读取localStorage状态后勾选标记显示异常

问题原因 #

• localStorage 存储的所有值默认都是字符串类型，调用 localStorage.getItem('Checkbox Value') 拿到的结果只会是字符串 "true"、"false" 或者 null，不会返回布尔类型的 true/false。
• React 复选框的 checked 属性按照布尔逻辑判断状态：只要传入值为真值就会显示勾选。非空字符串属于真值，因此即使你拿到的是 "false" 字符串，也会被判定为真值，导致复选框始终处于勾选状态。
• 标签文本显示正常是因为字符串 "true"/"false" 直接渲染时和布尔值的展示效果完全一致，你无法从文本上判断出类型差异。

修复方法 #

修改 useEffect 内的取值逻辑，将拿到的字符串转换为布尔值再赋值：

useEffect(() => {
  const savedValue = localStorage.getItem('Checkbox Value')
  // 只有存储的内容是字符串"true"时才赋值为布尔true，其余情况都为false
  setCheckbox(savedValue === 'true')
}, []);

补充注意：在复选框变更的回调 handleCheckboxChange 中存储值时，也要统一存储布尔值转成的字符串，避免后续取值判断异常，示例逻辑如下：

const handleCheckboxChange = (e) => {
  const currentChecked = e.target.checked
  setCheckbox(currentChecked)
  localStorage.setItem('Checkbox Value', String(currentChecked))
}

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