怎么处理 react hook 依赖问题？

Question

不懂就问，假如有以下 hooks：

import React from 'react';

const Demo = () => {
    const { userId } = useUser();
    const { address } = useUserAddress(userId);
    const { favious } = useUserFavious(userId);
    
    return (
        <div>Hello World</div>
    );
};

其中，useUserAddress和useUserFavious依赖userId的值，我如何确保userId获取成功后才运行下面的 hooks。目前想到的方案：

• 方案一：在 useUserAddress 和 useUserFavious 里判断userId 是否存在值。但是这样如果 hooks 多，每个都得加这个判断很繁琐
• 方案二：把后面的hooks提取到子组件或者 HOC：

import React from 'react';

const ChildrenDemo = ({ userId }) => {
    const { address } = useUserAddress(userId);
    const { favious } = useUserFavious(userId);
    
    return (
        <div>Hello World</div>
    );
};

const Demo = () => {
    const { userId } = useUser();
    
    if(!userId) return null;
    
    return <ChildrenDemo userId={userId} />
};

请问有没有更好的处理方式吗？感觉都挺麻烦的

Answer 1

我觉得可以修改一下你的hooks, 提供设置值的方法, 再使用useEffect去监听userId的变化:

import React from 'react';

const Demo = () => {
    const { userId } = useUser();
    const [address, setAddress] = useUserAddress(userId);
    const [favious, setFavious] = useUserFavious(userId);
    
    useEffect(() => {
        setAddress(userId);
        setFavious(userId);
    }, [userId]);
    
    return (
        userId && <div>Hello World</div>
    );
};

Answer 2

试试?

useEffect(() => {
    new Promise(res => {
        const { userId } = useUser();
        res(userId);
    }).then(data => {
        const { address } = useUserAddress(userId);
        const { favious } = useUserFavious(userId);
    })
})