javascript - 未处理的拒绝（TypeError）：无法读取未定义的属性“扩展”。(GraphQL)

Question

我将 GraphQL 与 MERNG 一起使用，但出现以下错误：未处理的拒绝（TypeError）：无法读取未定义的属性“扩展”。请帮帮我。我还重新安装了graphql。这是发生错误的行： setErrors(err.graphQLErrors[0].extensions.exception.errors);

这是我的 Register.js 文件：

import React, {
  useState
} from 'react'
import {
  Button,
  Form
} from 'semantic-ui-react'
import gql from 'graphql-tag'
import {
  useMutation
} from '@apollo/react-hooks'

function Register() {
  const [errors, setErrors] = useState({});
  const [values, setValues] = useState({
    username: '',
    email: '',
    password: '',
    confirmPassword: ''
  })

  const onChange = (event) => {
    setValues({ ...values,
      [event.target.name]: event.target.value
    });
  }

  const [addUser, {
    Loading
  }] = useMutation(REGISTER_USER, {
    update(proxy, result) {
      console.log(result);
    },
    onError(err) {
      console.log(err.graphQLErrors[0].extensions.exception.errors);
      setErrors(err.graphQLErrors[0].extensions.exception.errors);
    },
    variables: values
  })

  const onSubmit = (event) => {
    event.preventDefault();
    addUser();
  }



  return ( <
    div className = "form-container" >
    <
    Form onSubmit = {
      onSubmit
    }
    noValidate >
    <
    h1 > Register < /h1> <
    Form.Input label = "Username"
    placeholder = "Username"
    name = 'username'
    type = "text"
    value = {
      values.username
    }
    onChange = {
      onChange
    }
    /> <
    Form.Input label = "Email"
    placeholder = "Email"
    name = 'email'
    type = "email"
    value = {
      values.email
    }
    onChange = {
      onChange
    }
    /> <
    Form.Input label = "Password"
    placeholder = "Password"
    name = 'password'
    type = "password"
    value = {
      values.password
    }
    onChange = {
      onChange
    }
    /> <
    Form.Input label = "Confirm Password"
    placeholder = "Confirm Password"
    name = 'confirmPassword'
    type = "password"
    value = {
      values.confirmPassword
    }
    onChange = {
      onChange
    }
    /> <
    Button type = "submit"
    primary >
    Register <
    /Button> <
    /Form> {
      Object.keys(errors).length > 0 && ( <
        div className = "ui error message" >
        <
        ul className = "list" > {
          Object.values(errors).map(value => ( <
            li key = {
              value
            } > {
              value
            } < /li>
          ))
        } <
        /ul> <
        /div>
      )
    } <
    /div>
  )
}

const REGISTER_USER = gql `
    mutation register(
        $username: String!
        $email: String!
        $password: String!
        $confirmPassword: String!
    ){
        register(
            RegisterInput: {
                username: $username
                email: $email
                password: $password
                confirmPassword: $confirmPassword
            }
        ){
            id email username createdAt token
        }
    }
`

export default Register;

标签： javascriptreactjsgraph

Answer 1

它建议err.graphQLErrors[0]未定义的清除，如果您不想要未定义的错误，您可以执行以下操作：

setErrors(err&&err.graphQLErrors[0]?err.graphQLErrors[0].extensions.exception.errors:{});