Checkbox defaultChecked与数据库值不匹配问题求助

defaultChecked 是React非受控复选框的属性，仅在组件首次渲染时生效，后续即使关联的状态值更新，它也不会重新读取状态来改变复选框的选中状态。

你的代码里，useState(false) 给了初始值false，组件首次渲染时复选框用这个值设置了初始状态；而useEffect是在组件挂载后才从数据库获取数据并更新defaultEnabled，这时候defaultChecked已经完成了它的使命，不会再响应状态变化，所以即使数据库返回true，复选框也不会变成选中状态。

把复选框改成受控组件，用checked属性替代defaultChecked，这样状态更新时会同步触发复选框重新渲染，显示正确的选中状态：

修改后的复选框代码：

<input type='checkbox' onChange={handleChecked} checked={defaultEnabled}/>

同时确保你的handleChecked函数正确更新defaultEnabled状态（比如根据当前复选框的checked值来更新），示例如下：

const handleChecked = (e) => {
  setDefaultEnabled(e.target.checked);
  // 这里可以添加更新数据库的逻辑
};

这样当useEffect从数据库获取到正确值并更新状态后，复选框会立即同步显示对应的选中状态，后续用户操作也能正确更新状态。

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