我正在学习react，现在我有一个react应用程序，里面有用户和电影，你可以在登录的时候看到电影的信息。如果你是以管理员身份登录的，你可以访问一个管理页面，在那里你可以看到一个用户卡列表，并注册另一个管理员。这个卡片列表不需要刷新就可以更新。
因为我写的代码不是很干净，所以我想加入自定义钩子。问题是，使用新的自定义钩子，除了渲染之外，一切都很好。每当我删除一个用户或添加一个新的管理员时，除非我刷新页面，否则cardlist不会更新。
我现在有一个定制的钩子useUsers，但是我只在输入域和吐司通知中使用它，我试着在钩子中添加用户到useEffect，但是没有解决我的问题。
useEffect(() => { refreshUserList(); }, [users]);
这是我的代码。

function useUsers() {
    const [users, setUsers] = useState([])
    const [showModal, setShowModal] = useState(false)

    const notifyUserDeleted = () => toast.success('User deleted!', {
        position: "top-right",
        autoClose: 3000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "colored",
    });

    const [adminUsername, setAdminUsername] = useState("")
    const [adminPassword, setAdminPassword] = useState("")
    const [showAdminModal, setShowAdminModal] = useState(false)

    const notifyAddAdminSuccess = () =>
        toast.success('Admin registered!', {
            position: "top-right",
            autoClose: 3000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "colored",
        })

    const refreshUserList = () => {
        UserAPI.getUsers()
            .then(res => {
                setUsers(res.data.users);
            })
            .catch(err => {
                console.error(err);
            });
    };

    useEffect(() => {
        refreshUserList();
    }, []);

    const createAdmin = (adminUsername, adminPassword) => {
        const registeredAdmin = {
            "username": adminUsername,
            "password": adminPassword
        };
        UserAPI.createAdmin(registeredAdmin)
            .then(() => {
                setAdminUsername("");
                setAdminPassword("");
                notifyAddAdminSuccess();
                Adminpage.refreshUserList();
            })
            .catch(err => {
                console.log(err);
                alert("Failed to register admin!");
            });
    };

    const handleRegisterAdmin = (e) => {
        e.preventDefault();
        createAdmin(adminUsername, adminPassword);
        setShowAdminModal(false);
    };

    const deleteUser = (id) => {
        UserAPI.deleteUser(id)
            .then(() => {
                notifyUserDeleted()
                refreshUserList()
            })
            .catch(error => {
                console.error(error);
            });
    };

    const handleDelete = (e) => {
        e.preventDefault();
        deleteUser(e.target.value)
        setShowModal(false)
    }

    return {
        users, setUsers, showModal, setShowModal, notifyUserDeleted, notifyAddAdminSuccess, showAdminModal, setShowAdminModal,
        adminPassword, setAdminPassword, adminUsername, setAdminUsername, refreshUserList, handleRegisterAdmin, handleDelete
    }
}

export default useUsers;

function Adminpage() {
    const { users, refreshUserList } = useUsers();

    return (
        <div className="container" style={{ display: "flex" }}>
            <UserCardList users={users} refreshUserList={refreshUserList} />
            <InputAdmin refreshUserList={refreshUserList} />
        </div>
    );
}

export default Adminpage;

function UserCardList(props) {
    return (
        <div className="container">
            <h4 style={{ margin: "3% 0 2% 0" }}>User list:</h4>
            <Bootstrap.Row>
                {
                    props.users.map(user =>
                        <UserCard key={user.id} users={user} refreshUserList={props.refreshUserList} />
                    )
                }
            </Bootstrap.Row>
        </div>
    )
}

export default UserCardList;

function UserCard(props) {
    const { showModal,
        setShowModal,
        handleDelete
    } = useUsers()

    return (
        <Bootstrap.Col className="col-lg-4 col-12">
            <Bootstrap.Card className='mb-1' style={{ height: "98%", }}>
                <Bootstrap.Card.Body>
                    <Bootstrap.Card.Text><b>User ID: </b>{props.users.id}</Bootstrap.Card.Text>
                    <Bootstrap.Card.Text><b>Username: </b>{props.users.username}</Bootstrap.Card.Text>
                    <Bootstrap.Button style={{ backgroundColor: "red", borderColor: "gray" }} onClick={() => setShowModal(true)}><RiDeleteBin5Fill style={{ backgroundColor: "red" }} /></Bootstrap.Button>
                </Bootstrap.Card.Body>
            </Bootstrap.Card>
            <Bootstrap.Modal centered show={showModal} onHide={() => setShowModal(false)}>
                <Bootstrap.Modal.Header closeButton>
                    <Bootstrap.Modal.Title>Confirm Delete</Bootstrap.Modal.Title>
                </Bootstrap.Modal.Header>
                <Bootstrap.Modal.Body>Are you sure you want to delete this user?</Bootstrap.Modal.Body>
                <Bootstrap.Modal.Footer>
                    <Bootstrap.Button variant="secondary" onClick={() => setShowModal(false)}>
                        Cancel
                    </Bootstrap.Button>
                    <Bootstrap.Button variant="danger" value={props.users.id} onClick={handleDelete}>
                        Delete
                    </Bootstrap.Button>
                </Bootstrap.Modal.Footer>
            </Bootstrap.Modal>
        </Bootstrap.Col>
    )
}

export default UserCard;