未处理的拒绝(类型错误)：无法读取未定义的属性'extensions'。(图QL)

Question

我将GraphQL与MERNG一起使用，并收到以下错误：未处理的拒绝(TypeError(：无法读取未定义的属性"extensions"。请帮帮我。我还重新安装了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;

Answer 1

它清楚地表明err.graphQLErrors[0]是未定义的，如果你不想出现未定义的错误，你可以这样做：

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

Answer 2

更改setErrors来自

setErrors(err.graphQLErrors[0].extensions.exception.errors);

至

setErrors(err.graphQLErrors[0].extensions.errors);

Answer 3

你可以console.log(err);，看看它是什么样的错误。也许是网络错误。