Reactjs 无效的钩子调用。钩子只能在函数组件的主体内部调用。请把我从疯狂中拯救出来

您好，我一直在尝试创建一个组件，该组件返回一个表单以添加地址，代码如下：

import React, { useState } from "react"
import gql from 'graphql-tag'
import { useMutation } from '@apollo/react-hooks'
import { useForm } from '../../util/submitbutton'
import { Form, Button, Select } from 'semantic-ui-react';

const AddAddressForm = () => {
    const [errors, setErrors] = useState({});

    const stateAbbreviations = [
        'AL', 'AK', 'AS', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FM', 'FL', 'GA',
        'GU', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MH', 'MD', 'MA',
        'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND',
        'MP', 'OH', 'OK', 'OR', 'PW', 'PA', 'PR', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT',
        'VT', 'VI', 'VA', 'WA', 'WV', 'WI', 'WY'
    ]

    const { onChange, onSubmit, values } = useForm(addAddressCallback, {
        name: '',
        Address1: '',
        Address2: '',
        city: '',
        state: '',
        country: '',
        zip: '',
        phone: '',
        email: ''
    })

    const [addAddress, { loading }] = useMutation(ADD_ADDRESS, {
        update(_, results) {

        },
        onError(err) {
            alert('error')
            //setErrors(err.graphQLErrors[0].extensions.exception.errors)
        },
        variables: values
    })

    function addAddressCallback() {
        addAddress()
    }

    return (
        <div>
            <Form noValidate onSubmit={onSubmit} className={loading ? 'loading' : ''}>
                <Form.Input
                    label='Name'
                    name='name'
                    placeholder='Name'
                    value={values.name}
                    onChange={onChange}
                />
                <Form.Input
                    label='Address 1 *'
                    name='Address1'
                    placeholder='Address 1'
                    value={values.Address1}
                    onChange={onChange}
                />
                <Form.Input
                    label='Address 2'
                    name='Address2'
                    placeholder='Address 2'
                    value={values.Address2}
                    onChange={onChange}
                />
                <Form.Input
                    label='City'
                    name='city'
                    placeholder='City'
                    value={values.city}
                    onChange={onChange}
                />
                <Form.Select
                    label='State'
                    name='state'
                    options={stateAbbreviations}
                    value={values.state}
                    onChange={onChange}
                />
                <Form.Input
                    label='ZipCode'
                    name='zip'
                    placeholder='Zip'
                    value={values.zip}
                    onChange={onChange}
                />
                <Form.Input
                    label='Country'
                    name='country'
                    placeholder='Country'
                    value={values.country}
                    onChange={onChange}
                />
                <Form.Input
                    label='Email'
                    name='email'
                    placeholder='Email'
                    value={values.email}
                    onChange={onChange}
                />
                <Form.Input
                    label='Phone'
                    name='phone'
                    placeholder='Phone'
                    value={values.phone}
                    onChange={onChange}
                />
            </Form>
        </div>
    )
};

const ADD_ADDRESS = gql`
    mutation addAddress($name:String!, $Address1:String!,$Address2: String,$city:String!,$state:String!,$country:String!,$zip:String!,$phone:String!,$email:String!) {
        addAddress(AddressInput:{name: $name, Address1: $Address1, Address2: $Address2,city: $city,state: $state,country: $country,zip: $zip, phone:$phone, email:$email}){
            id,
            createdAt,
            userID
        }
    }

`
export default AddAddressForm();

import React，{useState}来自“React”
从“graphql标记”导入gql
从“@apollo/react hooks”导入{UseStation}
从“../../util/submitbutton”导入{useForm}
从“语义ui反应”导入{Form，Button，Select}；
常量AddAddressForm=（）=>{
const[errors，setErrors]=useState（{}）；
常量状态缩写=[
‘AL’、‘AK’、‘AS’、‘AZ’、‘AR’、‘CA’、‘CO’、‘CT’、‘DE’、‘DC’、‘FM’、‘FL’、‘GA’，
‘GU’、‘HI’、‘ID’、‘IL’、‘IN’、‘IA’、‘KS’、‘KY’、‘LA’、‘ME’、‘MH’、‘MD’、‘MA’，
‘MI’、‘MN’、‘MS’、‘MO’、‘MT’、‘NE’、‘NV’、‘NH’、‘NJ’、‘NM’、‘NY’、‘NC’、‘ND’，
‘MP’、‘OH’、‘OK’、‘或’、‘PW’、‘PA’、‘PR’、‘RI’、‘SC’、‘SD’、‘TN’、‘TX’、‘UT’，
“VT”、“VI”、“VA”、“WA”、“WV”、“WI”、“WY”
]
const{onChange，onSubmit，values}=useForm（addAddressCallback{
名称：“”，
地址1:“”，
地址2:“”，
城市：''，
声明：''，
国家：“，
zip:“”，
电话：''，
电子邮件：“”
})
const[addAddress，{loading}]=useMutation（ADD_地址{
更新（更新，结果）{
},
ONERR（错误）{
警报（'错误'）
//setErrors（err.graphQLErrors[0]。扩展名。异常。错误）
},
变量：值
})
函数addAddressCallback（）{
addAddress（）
}
返回(
)
};
const ADD_ADDRESS=gql`
地址（$name:String！，$Address1:String！，$Address2:String，$city:String！，$state:String！，$country:String！，$zip:String！，$phone:String！，$email:String！）{
addAddress（地址输入：{name:$name，Address1:$Address1，Address2:$Address2，city:$city，state:$state，country:$country，zip:$zip，phone:$phone，email:$email}）{
身份证件
创建数据，
用户ID
}
}
`
导出默认的AddAddressForm（）；

它可以编译，但当我打开webapp时，它会这样说：

错误：无效的钩子调用。钩子只能在身体内部调用 一个功能组件的名称。以下情况之一可能会发生这种情况： 理由:一,。您可能有不匹配版本的React和 渲染器（如React DOM） 2.你可能违反了钩子的规则 3.同一个应用程序中可能有多个React副本，有关如何调试的提示，请参阅 然后解决这个问题

---

我的应用程序中从react和use钩子导入的所有其他组件都可以工作，但我似乎不明白为什么不能工作。在我失去理智之前，请帮助我。

思考

导出默认的AddAddressForm（）
应该是：
export default AddAddressForm