如何处理未捕获的错误：对象作为 React 子错误无效

问题描述

处理从 GraphQL 解析器返回的用户输入错误的最佳方法是什么？我正在尝试使用 react 和 graphql 对用户 singup 进行编码。我想要用户错误，例如电子邮件被采用或表单上的其他一些验证消息。

目前我在浏览器窗口中看到以下内容

未处理的运行时错误错误：对象作为 React 子对象无效 （发现：错误：错误：电子邮件已被采用）。如果你想渲染一个 子集合，请改用数组。

反应组件

import React,{ useState } from "react";
import { gql,useMutation } from "@apollo/client";
import Form from "./styles/form";
import Router from "next/router";

const SIGNUP_MUTATION = gql`
    mutation SIGNUP_MUTATION(
        $email: String!
        $password: String!
        $name: String!
    ) {
        signup(email: $email,password: $password,name: $name) {
            email
            username
            password
            profile
            token
        }
    }
`;

const SignupComponent = () => {
    const [values,setValues] = useState({
        email: "",name: "",password: "",error: "",loading: false,message: "",showForm: true,});

    const { name,email,password,message,showForm } = values;

    const handleChange = (name) => (e) => {
        setValues({ ...values,error: false,[name]: e.target.value });
    };
    const showLoading = () =>
        loading ? <div className="alert alert-info">Loading...</div> : "";
    const showError = () =>
        error ? <div className="alert alert-danger">{error}</div> : "";
    const showMessage = () =>
        message ? <div className="alert alert-info">{message}</div> : "";

    const [signup,{ loading,error }] = useMutation(SIGNUP_MUTATION,{
        variables: {
            email: email,password: password,name: name,},});

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            await signup();
            if (error) {
                setValues({ ...values,loading: true,error: true });
            }
        } catch (err) {
            console.log(err);
        }

        if (error) {
            setValues({
                ...values,error: error,});
        } else {
            setValues({
                ...values,showForm: false,message: " Signup successful. Please signin",});
        }
    };

    const signupForm = () => {
        return (
            <div>
                <Form method="post" onSubmit={handleSubmit}>
                    <fieldset>
                        <h2>Sign Up for An Account</h2>
                        <div className="form-group">
                            <input
                                value={name}
                                onChange={handleChange("name")}
                                type="text"
                                className="form-control"
                                placeholder="Type your name"
                            />
                        </div>
                        <div className="form-group">
                            <input
                                value={email}
                                onChange={handleChange("email")}
                                type="email"
                                className="form-control"
                                placeholder="Type your email"
                            />
                        </div>
                        <div className="form-group">
                            <input
                                value={password}
                                onChange={handleChange("password")}
                                type="password"
                                className="form-control"
                                placeholder="Type your password"
                            />
                        </div>
                        <div>
                            <button className="btn btn-primary">Signup</button>
                        </div>
                    </fieldset>
                </Form>
            </div>
        );
    };

    return (
        <>
            {showError()}
            {showLoading()}
            {showMessage()}
            {showForm && signupForm()}
        </>
    );
};

export default SignupComponent;

解析器

    Mutation: {
        signup: async (__,{ email,name }) => {
            try {
                const user = await userService.signup({
                    name,});
                const token = await jwt.sign({ _id: user._id },APP_SECRET);
                const { profile,userName } = user;

                const authtype = {
                    token,username: userName,name,profile,};
                return authtype;
            } catch (error) {
                // throw new Error(error)
                throw  error;
            }
        },

解决方法

您不应在 {} 中使用对象。 error 是对象类型，不是字符串，因此应该将其转换为字符串类型以进行渲染。