Question

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

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();

它可以编译，但是当我打开 webapp 时，它说：

<块引用>

错误：无效的挂钩调用。 Hooks 只能在 body 内部调用一个功能组件。这可能发生在以下情况之一原因：1。你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本有关如何调试的提示，请参阅 https://reactjs.org/link/invalid-hook-call 并解决这个问题。

我的应用程序中从 react 导入并使用 hooks 的所有其他组件都可以工作，但我似乎无法弄清楚为什么不工作。在我失去理智之前请帮忙。

Answer 1

想想export default AddAddressForm(); 应该是：export default AddAddressForm; <--没有括号。 AddAddressForm() 相当于将函数组件调用为导出，无效。

无效的钩子调用。钩子只能在函数组件的主体内部调用。请救我脱离疯狂

1 个答案: