如何正確重構和調用重構的鈎子？

Question

我目前正在使用 Apollo 的 React 鈎子進行 GraphQL 身份驗證。 我想重構一個突變，以便我可以用於所有不同的登錄，如 Google、Facebook、Twitter OAuth 等。

import { useMutation } from '@apollo/react-hooks'
import { CREATE_POST_MUTATION } from '../../graphql/mutation'

const [createPost, { loading }] = useMutation(CREATE_POST_MUTATION, {
    onCompleted: data => {
        navigation.navigate("StatusModal", {
            status: "postingSuccess",
            screen: "Posting",
            data,
        })
    },
    onError: data => {
        navigation.navigate("StatusModal", {
            status: "postingError",
            screen: "Posting",
        })
    },
})

const createPostHandler = async () => {
    const { title, price, description, address } = value && value

    try {
        await createPost({
            variables: {
                title,
                body: description,
                price: Number(price),
                location: location.toString(),
                address,
            }
        })
    } catch (err) {
        throw new Error(err)
        navigation.navigate("StatusModal", {
            status: "postingError",
            screen: "Posting",
        })
    }
}

export { createPostHandler as default }

調用上面的代碼顯示了 React hooks 只能在函數組件的主體內部調用的錯誤。 我如何使這個可重復使用？

Answer 1

鈎子僅在功能組件的“渲染流”中運行（可以執行），您不能在其他上下文中運行它。

為了重用，您可以在外部文件/exported 函數中定義一個包含useMutation函數，並在許多功能組件中調用/運行它。

也許您正在尋找自定義掛鈎？