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

Posted 2023-03-10

【中文标题】如何处理未捕获的错误：对象作为 React 子错误无效

【英文标题】：How to handle Uncaught Error: Objects are not valid as a React child error

【发布时间】：2021-04-04 12:23:54

【问题描述】：

处理从 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,
                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;
            
        ,

【问题讨论】：

尝试用null替换showError和其他类似函数中的""

在你的catch错误中，试试：catch (error) throw error.response

【参考方案1】：

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

【讨论】：

已更改。浏览器窗口上仍然显示相同的错误。

@BenJonson 你能检查一下email、password、name、message、error => 这些值是否只是字符串，而不是对象？如果它们是对象，您将看到这样的错误。

错误是一个对象。尝试等待注册（）； 捕捉（错误） console.log（错误）； 我收到此错误：错误：电子邮件已被占用

@BenJonson 您不能在 中使用对象。请尝试仅呈现错误消息（字符串）。

或者只是作为一个快速测试-请尝试 JSON.stringify(error)