javascript - 建议：使用 onClick 和内联访问响应的 React Custom Hook

Question

我已经开始在 React 中使用自定义钩子，创建以下内容：

export function useLazyHook({ onCompleted, onError }) {
    // Apollo
    const client = useApolloClient()

    /**
     * Use State
     */

    const [loading, setLoading] = useState(false)
    const [data, setData] = useState(null)
    const [error, setError] = useState(null)

    /**
     * Method
     */

    const CallMe = async ({ input }) => {
        // Loading
        setLoading(true)
        try {
            const data = await client.mutate({
                mutation: MUTATION,
                variables: {
                    Input: input,
                },
            })
            setLoading(false)
            setData(data)
            return { error: null, data: data }
        } catch (error) {
            setError(error)
            if (error.graphQLErrors) {
                setError(error.graphQLErrors[0])
                return { error: error.graphQLErrors[0], data: null }
            }
        }
    }
    // Return
    return [{ loading, data, error }, CallMe]
}

钩子可以通过以下方式使用：

const [{ loading, data, error }, CallMe] = useLazyHook({
    onCompleted(res) {
        console.log(res)
    },
    onError(err) {
        console.log(err)
    },
})

我们可以在声明的变量或 onCompleted 和 onError 中访问加载、数据和错误变量。我们还可以通过以下方式在线访问相同的数据：

const { error, data } = await CallMe({
    input: {},
})
console.log(error)
console.log(data)

以上所有内容都很好，但是，如果我遗漏了什么或做错了什么，那么任何建议都非常受欢迎。