使用Formik做React表单校验时报Objects are not valid as a React child错误如何解决

你遇到的这个报错是React的常见渲染错误：当你尝试把一个对象直接作为子元素交给React渲染时就会触发，React支持渲染的子元素类型只有字符串、数字、合法JSX节点、null、undefined这几类，你这次的错误是代码中某个位置返回了空对象直接参与渲染，因此触发报错。

问题出在你写的两个ErrorMessage组件属性传值错误：
Formik的ErrorMessage组件要求必须传入name属性来绑定对应表单字段，你的邮箱、密码对应的校验提示组件写错了属性名：

• 原错误代码：<ErrorMessage email="email"/>，正确写法应为<ErrorMessage name="email"/>
• 原错误代码：<ErrorMessage password="password"/>，正确写法应为<ErrorMessage name="password"/>

你没有给这两个组件传入正确的name属性，组件内部运行异常后返回了空对象，React尝试渲染这个空对象就触发了你遇到的报错。同时你的原代码里还存在校验提示文本拼写错误，也可同步修正。

import React from 'react'
import {Formik,Form,Field, ErrorMessage} from "formik"
import * as  Yup from 'yup' 
const FormikComponent = () => {
const initialValues= {
       name:"",
       email:"",
       password:""
   }
const onSubmit=values=>{
       console.log("Values after submission", values)
   }
   const validationSchema=Yup.object({
       name:Yup.string().required("Required"),
       email:Yup.string().email("invalid email format").required("required"),
       password:Yup.string().required("required")
   })
return (
    <Formik initialValues={initialValues} validationSchema={validationSchema} 
                  onSubmit= {onSubmit}>
        <Form action="">
            <div className="form-control">
            <label htmlFor="name">name</label>
            <Field type="text" name="name" id="name"  />
            <ErrorMessage name="name"/> 
            </div>
            <div className="form-control">
            <label htmlFor="email">email</label>
            <Field type="email" name="email" id="email"   />
            <ErrorMessage name="email"/>
            </div>
            <div className="form-control">
            <label htmlFor="password">Password</label>
            <Field type="password" name="password" id="password" />
            <ErrorMessage name="password"/>
            </div>
            <button type="submit">Submit</button>
        </Form>
   </Formik>
)
}
export default FormikComponent ;

内容的提问来源于stack exchange，提问作者mujtaba hussain