Next.js (REACT) 在第一次“取消选中”复选框时不触发“onChange”事件

Question

我为组件内的权限制作了一个“复选框”网格。出于某种原因，如果操作取消选中复选框（默认情况下从服务器加载其状态），它不会触发第一个“onChange”事件。对我做错了什么的指导将不胜感激，非常感谢！

更新：使用checked而不是“defaultChecked”似乎解决了这个问题，但是，然后我想出了这个错误：

<块引用>

"警告：组件正在将不受控制的输入更改为受控制。这可能是由于值从未定义更改为已定义值所致，这不应该发生。决定在整个生命周期内使用受控制还是不受控制的输入元素组件。更多信息：...."

这是组件：

void __fastcall TForm1::FormResize(TObject *Sender)
{
 if(( WindowState == wsMaximized )  
  &&( UserPrefStyle != "Windows" ))
  {
   OnResize = NULL;
   int hAdj = Height - ClientHeight;
   hAdj -= ( Width - ClientWidth );
   ClientHeight = Monitor->WorkareaRect.Height() - hAdj;
   OnResize = FormResize;
   }
}

这是 useForm：

import { useState } from "react";
import { Form } from "react-bootstrap";
import api from "../../lib/api";
import useForm from "../../lib/useForm";

export default function PermissionSelector({ user, permissions }) {
    let initialState = permissions;

    const [loaded, setLoaded] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [success, setSuccess] = useState(null);

    let { inputs, handleChange, resetForm, setForm } = useForm(initialState);

    if (!loaded) {
        setForm(permissions);
        setLoaded(true);
    }

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError(false);
        setSuccess(false);

        console.log(inputs);

        await api()
            .put(`/user-permissions/${user.id}`, inputs)
            .then((res) => setSuccess("Permissions have been updated!"))
            .catch((err) => {
                if (err.status === 422) {
                    setError(err.data.message);
                }
            });

        setLoading(false);
    };

    return (
        <>
            <style global jsx>
                {`
                    .permissions {
                        overflow: hidden;
                    }
                    .permissions li {
                        list-style: none;
                        display: block;
                        float: left;
                        width: 50%;
                    }

                    @media only screen and (min-width: 768px) {
                        .permissions li {
                            width: 25%;
                        }
                    }
                `}
            </style>
            {success && <div className="alert alert-success">{success}</div>}
            {error && <div className="alert alert-danger">{error}</div>}
            <Form className="form-primary" onSubmit={handleSubmit}>
                <ul className="permissions">
                    {loaded &&
                        Object.keys(permissions).map((permission) => (
                            <li key={permission}>
                                <Form.Check
                                    type="checkbox"
                                    id={permission}
                                    label={permission.split("permissions.")[1]}
                                    name={permission}
                                    defaultChecked={inputs[permission]}
                                    onChange={handleChange}
                                    custom
                                />
                            </li>
                        ))}
                </ul>

                <div className="btn-container">
                    <button
                        type="submit"
                        className="btn-submit"
                        disabled={loading}
                    >
                        {loading && "Updating..."}
                        {!loading && "Update"}
                    </button>
                </div>
            </Form>
        </>
    );
}