почему это становится из «неопределенного» в «объект»?

avatar
CWYOO
9 августа 2021 в 00:27
84
0
0

Я использую next, 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}

Мой вопрос: сразу после "если", почему данные из "неопределенных" становятся "объектными"?

Источник
zerkms
9 августа 2021 в 00:50
1

Потому что useGetUserByIdQuery возвращает это так?

zerkms
9 августа 2021 в 00:51
1

«сразу после «если», почему данные превращаются из «неопределенных» в «объект»?» --- не становится так после if, становится как в следующем цикле рендеринга. Смотрите, что у вас есть два 1.

Chan Youn
9 августа 2021 в 00:54
0

Когда данные извлекаются, ваш хук useGetUserByIdQuery, скорее всего, устанавливает внутри него состояние data. Когда данные устанавливаются с новыми значениями в вашем хуке, ваш компонент получает новое значение от хука и перерисовывает себя с данными как object вместо undefined.

mr rogers
9 августа 2021 в 01:13
1

Как заметил @ChanYoun, вы, вероятно, получаете данные от хука, который выполняет некоторую асинхронную работу, вызывая ее изменение и повторную визуализацию компонента. Возможно, вы сможете использовать fetching, чтобы if (fetching) { return null }, прежде чем вы начнете смотреть на часть data. В этот момент ваш data должен был быть разрешен как объект (если мы правильно догадываемся, что делает useGetUserByIDQuery).

Ответы (0)