React+TypeScript中布尔State存LocalStorage报错，如何修复？

错误原因 #

你当前的handleChange函数里，传给setDarkMode的回调直接返回了localStorage.setItem的执行结果——但这个方法的返回值是void，而setState的回调函数要求必须返回和状态同类型的值（这里是boolean）。TypeScript的类型校验严格卡了这一点，所以抛出了类型不兼容的错误。

修复代码 #

调整handleChange的逻辑，先计算出新的状态值，完成本地存储后再返回这个值：

const handleChange = () => {
  setDarkMode(prevDarkMode => {
    // 先计算新的深色模式状态
    const newDarkMode = !prevDarkMode;
    // 存到localStorage
    localStorage.setItem('darkMode', JSON.stringify(newDarkMode));
    // 返回新状态，满足setState的类型要求
    return newDarkMode;
  });
};

额外优化：初始化时读取本地存储 #

为了刷新页面后保持深色模式状态，建议初始化state时从localStorage读取：

const [darkMode, setDarkMode] = useState<boolean>(() => {
  const savedDarkMode = localStorage.getItem('darkMode');
  // 有存储值就解析，没有就用默认的false
  return savedDarkMode ? JSON.parse(savedDarkMode) : false;
});

内容的提问来源于stack exchange，提问作者Isa Seferović