React中Type 'Dispatch<SetStateAction<boolean>>'无法赋值给boolean的问题求助

问题重现 #

尝试将checkbox的勾选状态存入React state时，出现类型错误，且直接操作DOM更新状态存在延迟：

import { useState } from 'react';

function Component() {
  let [toggleCheck, setToggleCheck] = useState(false);

  const toggleOnchange = () => {
      setToggleCheck(!toggleCheck);
  }

  return (
    <input 
      type="checkbox" 
      id="layout_toggle" 
      defaultChecked={toggleCheck} 
      onChange={toggleOnchange}
    />
  );
}

错误信息：Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type 'boolean'

解决步骤 #

1. 切换为受控组件模式 #

defaultChecked是非受控组件的初始值属性，若要绑定state实现双向同步，需改用checked属性：

<input 
  type="checkbox" 
  id="layout_toggle" 
  checked={toggleCheck} 
  onChange={toggleOnchange}
/>

2. 通过事件对象获取实时勾选状态 #

不要依赖state的旧值进行取反更新，而是直接从事件目标获取当前状态，避免异步更新导致的状态不同步：

const toggleOnchange = (e) => {
    setToggleCheck(e.target.checked);
}

3. 排查类型错误根源 #

出现Dispatch类型无法赋值给boolean的错误，通常是不小心将状态更新函数setToggleCheck传给了需要布尔值的属性（比如误写为checked={setToggleCheck}）。检查代码中所有使用toggleCheck的地方，确保传递的是状态变量而非更新函数。

4. 放弃直接操作DOM的方式 #

用document.getElementById()获取元素更新状态会脱离React的状态管理流程，导致更新延迟。React的状态更新是异步批量处理的，依赖事件对象获取状态才是符合框架设计的正确做法。

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