0

我仍然无法将头绕在 Hooks 上。我经常遇到它抱怨我正在做的问题Invalid hook call。
这一次，是尝试useMutation在自定义钩子中使用来自 Apollo 的钩子。
如果有人能告诉我我做错了什么，我将不胜感激。

组件（我在哪里调用我的自定义钩子）

export default function MyComponent() {

    const { loading, error, data } = useQuery( GET_ORDERS );

    const setOrdersInMetafields = ( orders: Array<OrderModel> ) => {
        metafieldResp = useSetMetafields( { customerId, value: orders, field: 'duplicateOrders' } );
    }

    @useEffect( () => {
        setOrdersInMetafields( orders );
    }, [ orders ] );
}

定制挂钩

export const useSetMetafields( { customerId, value, field }, { customerId: string, value: any, field: string } ) => {
    [ updateMetafield, { loading, error, data } ] = useMutation( SET_METAFIELD_ON_CUSTOMER );

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

    const onUpdateMetafield = () => {
        updateMetafield( {
            variables: {
                input: {
                    id: customerId,
                    metafields: [
                        {
                            namespace: 'app-name',
                            key: field,
                            value: JSON.stringify( value ),
                            type: 'string'
                        }
                    ]
                }
            }
        } );
    }
}

结果错误：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
4

1 回答 1

1

始终在 React 函数的顶层使用 Hooks。你应该useSetMetafields在旁边打电话useQuery。要使您的代码正常工作，您需要更改自定义挂钩的方面。我的建议，以及您提供的代码量：


export default function MyComponent() {
    const { loading, error, data } = useQuery( GET_ORDERS );
    { doUpdateMetaField } = useSetMetafields();

  const setOrdersInMetafields = ( orders: Array<OrderModel> ) => {
// Make doUpdateMetaField function return something if you need and collect it here
       doUpdateMetaField( { customerId, value: orders, field: 'duplicateOrders' } );
    }
    useEffect( () => {
        setOrdersInMetafields( orders );
    }, [ orders ] );
}


export const useSetMetafields = () => {
    [ updateMetafield, { loading, error, data } ] = useMutation( SET_METAFIELD_ON_CUSTOMER );

    const doUpdateMetaField = ({ customerId, value, field }, { customerId: string, value: any, field: string } ) => {
        updateMetafield( {
            variables: {
                input: {
                    id: customerId,
                    metafields: [
                        {
                            namespace: 'app-name',
                            key: field,
                            value: JSON.stringify( value ),
                            type: 'string'
                        }
                    ]
                }
            }
        } );
    }

return {
   doUpdateMetaField
}
}
于 2022-02-06T11:24:28.863 回答