如何處理未捕獲的錯誤：對象作為 React 子錯誤無效

Question

處理從 GraphQL 解析器返回的用戶輸入錯誤的最佳方法是什么？ 我正在嘗試使用 react 和 graphql 對用戶 singup 進行編碼。 我想用戶錯誤，如 email 或表單上的其他一些驗證消息。

目前我在瀏覽器 window 上得到以下信息

未處理的運行時錯誤錯誤：對象作為 React 子項無效（發現：錯誤：錯誤：Email 已被占用）。 如果您打算渲染一組子項，請改用數組。

反應組件

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,
                loading: false,
                error: error,
                showForm: true,
                message: "",
            });
        } else {
            setValues({
                ...values,
                loading: false,
                error: "",
                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, password, name }) => {
            try {
                const user = await userService.signup({
                    name,
                    email,
                    password,
                });
                const token = await jwt.sign({ _id: user._id }, APP_SECRET);
                const { profile, userName } = user;

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

Answer 1

您不應該在{}中使用 object 。 error是 object 類型，而不是字符串，因此應將其轉換為字符串類型以進行渲染。