Блог

Я пытаюсь реализовать функцию входа в мое приложение react.

 import React, { useState, useEffect } from 'react'
import { useQuery, useLazyQuery, useMutation } from "@apollo/client"
import { useForm } from "react-hook-form"
import { LOGIN } from '../queries/queries'

const Login = () => {

   const [formValue, setFormValue] = useState({})
   const { loading, error, data } = useQuery(LOGIN, {
      variables: {
         email: formValue.email,
         password: formValue.password
      }
   })


   const { register, handleSubmit } = useForm()
   const onSubmit = (value) => {
      setFormValue(value)
   }



   if (loading) return <p>loading</p>


   return(
      <>
         <form onSubmit={handleSubmit(onSubmit)} >
            <input 
               type="text"
               name="email"
               placeholder="E-mail"
               ref={register}
            />
            <input 
               type="password"
               name="password"
               placeholder="Password"
               ref={register}
            />
            <button type="submit">
               Login
            </button>
         </form>
      </>
   )
}
  

console.log(data.user) Например, когда я кодирую, возникает ошибка, потому user что не определено.
Я знаю, что могу получить объект из data , если я кодирую переменные напрямую, но я хочу получить его после handleSubmit .

Я думаю, что если я смогу создать data объект изначально, ошибки не произойдет. Тогда есть ли какой-нибудь способ сделать это?

попробуйте «данные?.user» вместо «data.user» при обращении к этому атрибуту объекта вопросительный знак должен отключать ошибку, если объект не существует

обновление: вы также можете попробовать объявить данные как пустой объектный литерал: { загрузка, ошибка, данные = {} }