我正在工作的ReactJS与惯性JS组合应用程序。我的进展，以完成我的编辑功能。所以我需要使一些复选框被选中的默认值的基础上，在一组数组。
我循环选中复选框，让用户选择权限列表，其中一些权限应该已经根据数组中的数据选中。
我很困惑地修正了这个问题，有时我成功地勾选了它们但所有的复选框都勾选了也不能取消勾选复选框。
这是我密码

export default function EditPermission (props){
const {role} = usePage().props
const { data, setData, put, processing, errors, reset } = useForm({
    name: role.name || '',
    permissions: [] // store the permissions data on role

})

const mapPermissionsOnRole = () => {
    for(let i=0; i < role.permissions.length; i++){
       data.permissions.push(role.permissions[i]['name'])
    }
} //map the already exist permissions and push to data.permissions

const handleChecked = (e) => {
    let value = e.target.name;
    if (e.target.checked) {
        setData("permissions", [...data.permissions, value]);

    } else {
        setData(
            "permissionss",
            data.permissions.filter((item) => {
                return item !== value
            })
        );
    }
};

const submit = (e) => {
    e.preventDefault();
    put(route('role.update',permission.id));
};


return (
    <AuthenticatedLayout auth={props.auth} errors={props.errors}>
    <div className="w-full lg:max-w-6xl mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">        

        <form onSubmit={submit}>
            <div>
                    {props.permissions && props.permissions.length > 0 ? role.permissions.map((permissions, i) => {
                        return(
                            <div>
                                <Checkbox checked={props.permissions[i].name.includes(data.permissions)} name={permissions.name} value={data.permissions} handleChange={handleChecked} />{permissions.name}
                            </div>
                        )
                            
                            
                        }):<p>Permissions Coming Soon!</p>
                    }

                <PrimaryButton className="ml-4" processing={processing}>
                    Update
                </PrimaryButton>
            </div>

        </form>
    </div>

    </AuthenticatedLayout>
    
)

}