错误：React.Children.only 期望接收单个 React 元素子元素。福米克

Question

我在 Formik 道具中遇到此错误。我和formik合作很长时间了，这是我第一次遇到这种情况

Answer 1

Formik 的子节点应该是一个 single 反应节点，或者是一个渲染函数。
因此，如果有多个子节点，您会收到错误，例如：

      <Formik initialValues={...} onSubmit={() => ...}>
        <Field name="foo" ... />
        <hr>
        <MyFields ... />
      </Formik>

您只需将它们包装在 Fragment 中即可修复：

      <Formik initialValues={...} onSubmit={() => ...}>
        <>
          <Field name="foo" ... />
          <hr>
          <MyFields ... />
        </>
      </Formik>

Answer 2

 const Contacto = () => ( 
    <>
<section id="contact">
    <div class="container">
        <h2>Contactanos</h2>
        
        <div class="flex">

            <div id="form-container">
                <h3>Dejá un mensaje</h3>
               <Formik
                initialValues={{ name: '', email: '', motivo: '', mensaje:'' }}
                validationSchema={Schema}
                onSubmit={(values, { setSubmitting }) => {
                setTimeout(() => {
                setSubmitting(false);
                }, 1000);
                }}
        >   {({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit,
            isSubmitting
          }) => (
                <form onSubmit={handleSubmit}>
                    <label for="name">Nombre</label>
                    <input 
                    type="text" 
                    id="name"  
                    name="name"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.name} />
                    {errors.name && touched.name && errors.name}
                    <label for="email">Email</label>
                    <input  
                        id="email"
                        type="email"
                        name="email"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.email}
                    />
                    {errors.email && touched.email && errors.email}
                    <label for="subject">Motivo</label>
                    <input type="text" 
                            id="subject" 
                            name="motivo"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.motivo}
                    />
                    {errors.motivo && touched.motivo && errors.motivo}
                    <label for="message">Mensaje</label>
                    <textarea id="message"
                              type="mensaje"
                              name="mensaje"
                              onChange={handleChange}
                              onBlur={handleBlur}
                              value={values.mensaje}
                    >Escribí tu mensaje..</textarea>
                    {errors.mensaje && touched.mensaje && errors.mensaje}
                    <button class="rounded">Enviar</button>
                </form>
                )}
                </Formik> 
            </div>

            <div id="address-container">
                <label>Dirección</label>
                <address>
                    San Javier, Cordoba 
                </address>

                <label>Telefono</label>
                <a href="#">3544-32-2323</a>

                <label>Email</label>
                <a href="#">[email protected]</a>
            </div>
    </div>
    </div>
</section>

）； 导出默认联系人；

Answer 3

一切都在 Fragment 中。进口也OK