自定义React挂钩抛出错误“ React”已检测到SupplyPlaidLink调用的挂钩顺序的变化。”

Question

我正在尝试为格子API的链接功能制作自定义式钩子。我的自定义挂钩代码看起来像这样：

function useProvidePlaidLink() {
    const auth = useAuth();
    // @ts-ignore
    if (!auth.user) return null;
    const [linkToken, setLinkToken] = useState(null);

    const fetchToken = useCallback(async () => {
        try {
            const config = {
                method: "post",
                headers: {
                    'earmark-api-key': process.env.EARMARK_API_KEY,
                },
                params: {
                    // @ts-ignore
                    user_id: auth.user.uid
                },
                url:'/api/createLinkToken',
            }
            const response = await axios(config);
            setLinkToken(response.data.linkToken);
        } catch (error) {
        }
    }, []);

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

    const onSuccess = useCallback(async (publicToken, metadata) => {
        const config = {
            method: "post",
            headers: {
                'earmark-api-key': process.env.EARMARK_API_KEY,
            },
            params: {
                // @ts-ignore
                user_id: auth.user.uid,
                publicToken: publicToken,
            },
            url: '/api/exchangeLinkToken',
        };
        try {
            const response = await axios(config);
        } catch (error) {
        }
    }, []);

    const config = {
        token: linkToken,
        onSuccess,
    }
    const { open, exit, ready } = usePlaidLink(config);

    return { open, exit, ready, fetchToken }
}

前3行正在调用我的自定义验证挂钩以获取用户用户ID。当页面首次渲染时，这是不确定的，但是稍后拆分后，它会加载在UID中。但是，在不确定的情况下，我的格子链接代码会丢弃错误。因此，我在格子链接代码中添加了一个快速IF语句以检查是否已定义，如果不返回，则不返回并且不要执行代码。然后，这引发了错误React已检测到SupplyPlaidLink调用的挂钩顺序的变化。如果不解决，这将导致错误和错误。有关更多信息，请阅读挂钩规则：我不认为这是一件大事，因为如果我只等待拆分的第二个）然后，我可以运行该功能。但是我不喜欢看到这个错误，所以我应该如何解决这个错误？ 谢谢

Answer 1

在开始时，您检查auth.user is null，如果是，则返回该功能。这将导致每个挂钩 null检查将不会运行，这将导致错误。

要解决这个问题，即使用户为null，您也必须运行挂钩。

该代码应该解决问题：

function useProvidePlaidLink() {
    const auth = useAuth();

    const [linkToken, setLinkToken] = useState(null);

    const fetchToken = useCallback(async () => {
        try {
            // @ts-ignore
            if (!auth.user) return;
            const config = {
                method: "post",
                headers: {
                    'earmark-api-key': process.env.EARMARK_API_KEY,
                },
                params: {
                    // @ts-ignore
                    user_id: auth.user.uid
                },
                url:'/api/createLinkToken',
            }
            const response = await axios(config);
            setLinkToken(response.data.linkToken);
        } catch (error) {
        }
    }, []);

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

    const onSuccess = useCallback(async (publicToken, metadata) => {
        // @ts-ignore
        if (!auth.user) return;
        const config = {
            method: "post",
            headers: {
                'earmark-api-key': process.env.EARMARK_API_KEY,
            },
            params: {
                // @ts-ignore
                user_id: auth.user.uid,
                publicToken: publicToken,
            },
            url: '/api/exchangeLinkToken',
        };
        try {
            const response = await axios(config);
        } catch (error) {
        }
    }, []);

    const config = {
        token: linkToken,
        onSuccess,
    }
    const { open, exit, ready } = usePlaidLink(config);

    return { open, exit, ready, fetchToken }
}