React自定义Hook引发用户列表无法自动刷新问题求助

我正在学习React，开发的应用包含用户与电影模块：登录后可查看电影信息，以管理员身份登录可进入Adminpage页面，查看用户卡片列表并注册新管理员。原本该列表无需刷新即可更新，但引入自定义Hook useUsers 后，删除用户或添加新管理员后，用户卡片列表必须刷新页面才会更新。我尝试在Hook的useEffect中添加users作为依赖项（useEffect(() => { refreshUserList(); }, [users]);），但问题未解决。

核心问题分析 #

1. 自定义Hook重复实例化：UserCard组件里直接调用useUsers()，导致每个卡片都拥有独立的users状态和函数实例，和Adminpage里的状态完全隔离。删除操作触发的是卡片内部Hook的刷新，根本不会更新页面上层的用户列表状态，自然不会重新渲染。
2. 跨组件调用错误：createAdmin函数里直接写Adminpage.refreshUserList()，这是完全错误的用法——组件的函数不能通过组件名直接调用，每个组件实例的函数都是独立的。
3. 无效依赖项导致隐患：给useEffect加users依赖会触发无限循环（刷新列表更新users，users变化又触发刷新），完全没必要。

修复方案 #

1. 统一状态源

所有需要使用useUsers状态和方法的组件，都从上层的Adminpage接收props，不再各自调用useUsers，保证整个Admin页面共享同一套状态。

2. 修正添加管理员后的刷新逻辑

在createAdmin里直接调用Hook内部的refreshUserList，不要试图调用组件的方法。

3. 清理无效依赖项

移除useEffect里的users依赖，保持初始加载时只调用一次列表刷新。

修正后的代码 #

useUsers.js

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);
            });
    };

    // 移除users依赖，避免无限循环
    useEffect(() => {
        refreshUserList();
    }, []);

    const createAdmin = (adminUsername, adminPassword) => {
        const registeredAdmin = {
            "username": adminUsername,
            "password": adminPassword
        };
        UserAPI.createAdmin(registeredAdmin)
            .then(() => {
                setAdminUsername("");
                setAdminPassword("");
                notifyAddAdminSuccess();
                // 直接调用Hook内部的刷新方法
                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;

Adminpage.js

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

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

export default Adminpage;

UserCardList.js

function UserCardList(props) {
    const { users, showModal, setShowModal, handleDelete } = props

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

export default UserCardList;

UserCard.js

function UserCard(props) {
    // 从props接收状态和方法，不再单独调用useUsers
    const { showModal, setShowModal, handleDelete } = props

    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.user.id}</Bootstrap.Card.Text>
                    <Bootstrap.Card.Text><b>Username: </b>{props.user.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.user.id} onClick={handleDelete}>
                        Delete
                    </Bootstrap.Button>
                </Bootstrap.Modal.Footer>
            </Bootstrap.Modal>
        </Bootstrap.Col>
    )
}

export default UserCard;

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