小编Sea*_*ean的帖子

完整错误：错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

尝试将组件导入我的 Nextjs 页面，但出现上述错误。当我将组件中的所有代码放入页面时，它呈现得非常好，但是当我导入它时，出现错误。

这是主页代码：

export default function DealsList({data}){

    const { toggleColorMode } = useColorMode();

    return (<>
            <Button onClick={toggleColorMode}><SunIcon /></Button>
            <Box w={500} p={4} m="20px auto">
                <Heading as="h1" size="xl" textAlign="center">
                    Welcome to Stealz
                </Heading>
                <Heading as="h2" size="l" textAlign="center" m={5}>
                    Games on Sale
                </Heading>
                </Box>
                {data.map((deal) => (
                    <div key={deal.dealID}>
                        <Center>
                        <Box width="lg" 
                            borderWidth="1px"
                            _hover={{ bgGradient: "linear(to-r, gray.300, yellow.400, pink.200)" }}
                            mb="2" 
                            p={4}
                            rounded="lg" 
                            overflow="hidden"
                            shadow="1px 1px 3px rgba(0,0,0,0.3)"
                            >
                         
                        <Box
                            mt="1"
                            ml = "2"
                            mr = "2"
                            p={3}
                            fontWeight="semibold"
                            as="h4"
                            lineHeight="tight" …

当用户用钱包连接到该网站时，我试图创建一个新用户。

当用户点击按钮进行连接时，useAccount钩子将返回一个字符串类型的地址。

然后我想使用 tRPC 在我的数据库中创建一个具有此地址的新用户。

目前，我收到无效的挂钩调用错误。

当用户单击该按钮时，将调用 authHandler 方法，然后调用此挂钩：

//hook to get account info
const account = useAccount();

const { connectAsync } = useConnect({
    connector: new InjectedConnector(),
    onSuccess: () => handleSuccessfulConnection(),
    onError: () => handleConnectionError(),
  });

然后 onSuccess 回调执行：

const handleSuccessfulConnection = (): void => {
    const { data } = trpc.user.createUser.useMutation(account.address);
    //runtime error here about invalid hook call
    console.log(data);
    setShowSuccessToast(true);
  };

我有什么办法可以解决这个问题吗？