复选框默认不匹配状态

Question

我想要一个复选框，其 defaultChecked 值与我的数据库中的值匹配。我当前的问题是 defaultChecked 始终为 false，即使数据库值为 true 也是如此。

这是我目前的想法+代码：

我将 defaultChecked 存储为状态：

 const [defaultEnabled, setDefaultEnabled] = useState(false);

然后，我使用 useEffect 挂钩在页面加载开始时从数据库中读取一次。

 useEffect(() => {
    const fetchEnabled = async () => {
      const reference = ref(db, 'Permissions/');
      onValue(reference, (snapshot) => {
        setDefaultEnabled(snapshot.val());
        // This read to the database works - that is, snapshot.val() does indeed return the correct boolean value
      });
    };

    fetchEnabled();
  }, []);

最后我有复选框本身[handleChecked 函数可以工作并且不会影响状态]。

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

我怀疑问题来自于开始时的 useState(false) ，但我的理解是，当运行 useEffect 时，它会更新状态，这将导致复选框以正确的值重新渲染。

任何帮助将不胜感激！

Answer 1

您可以安装 yn 库并设置状态，如下所示。

1. npm 安装 yn
2. setDefaultEnabled(yn(snapshot.val()));