javascript - 为什么这会从“未定义”变为“对象”？

Question

我正在使用下一个，chakra-ui，但我不知道为什么会发生这种情况

src/pages/myAccount.tsx

import { Box, Link } from '@chakra-ui/react';
import { withUrqlClient } from 'next-urql';
import React from 'react';
import { NavBar } from '../components/NavBar';
import { useGetUserByIdQuery } from '../generated/graphql';
import { createUrqlClient } from '../utils/createUrqlClient';

interface myAccountProps {}

const myAccount: React.FC<myAccountProps> = ({}) => {
const [{data, fetching},] = useGetUserByIdQuery();
console.log("1.", data);
if (!data) {
    return (
        <>
        Invalid Access, Not logged in
        </>
    )
}
console.log("2.", data);
let userInfo = data.getUserById;

return (
<>
<NavBar/>
    <Box>{userInfo.userId}</Box>
    <Box>{userInfo.userName}</Box>
    <Box>{userInfo.univ}</Box>
    <Box>{userInfo.sex}</Box>
    <Box>{userInfo.firstName}</Box>
    <Box>{userInfo.lastName}</Box>
    <Box>{userInfo.age}</Box>
    <Box>{userInfo.email}</Box>
</>);
}

export default withUrqlClient(createUrqlClient)(myAccount);

当我执行这段代码时，它根本不起作用。我得到了这样的控制台日志

1. undefined
1. {getUserById: null}
2. {getUserById: null}
1. {getUserById: null}
2. {getUserById: null}

我的问题是，就在“如果”之后，为什么数据会从“未定义”变为“对象”？

标签： javascriptreactjstypescript