React Hook useEffect 缺少一些依赖项

Question

我尝试运行一个程序，但收到此警告消息：第 75:8 行：React Hook useEffect 缺少依赖项：“客户端”和“加载”。要么包含它们，要么删除依赖数组react-hooks/exhaustive-deps

这是我的代码

const UserList = ({ setSelectedUsers }) => {
    const { client } = useChatContext();
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);
    const [listEmpty, setListEmpty] = useState(false);
    const [error, setError] = useState(false);
    
    useEffect(() => {
        const getUsers = async () => {
            if(loading) return;

            setLoading(true);
            
            try {
                const response = await client.queryUsers(
                    { id: { $ne: client.userID } },
                    { id: 1 },
                    { limit: 8 } 
                );

                if(response.users.length) {
                    setUsers(response.users);
                } else {
                    setListEmpty(true);
                }
            } catch (error) {
               setError(true);
            }
            setLoading(false);
        }

        if(client) getUsers()
    }, []);

Answer 1

您可以通过 useEffect 依赖项上方的 // eslint-disable-next-line react-hooks/exhaustive-deps 来消除警告。 useEffect 有时会建议无用的依赖项，这些依赖项实际上不应添加到依赖项数组中

useEffect(() => {
        const getUsers = async () => {
            if(loading) return;

            setLoading(true);
            
            try {
                const response = await client.queryUsers(
                    { id: { $ne: client.userID } },
                    { id: 1 },
                    { limit: 8 } 
                );

                if(response.users.length) {
                    setUsers(response.users);
                } else {
                    setListEmpty(true);
                }
            } catch (error) {
               setError(true);
            }
            setLoading(false);
        }

        if(client) getUsers()
// eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);```