Error: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead

Question

我已经阅读了很多关于同一个错误的问题，但无法理解我的情况。在其他问题上，此错误是 caused by an object being used as a React child 或由传递了多个 prop 属性引起的。

我正在尝试设置 formik 和 yup 以根据月份字段验证日期字段，两者都使用 react-select，如果月份是二月那么允许的最大天数是 29。只是...

我已经设法在 Codesandbox 中重现错误：https://codesandbox.io/s/formik-yup-reactselect-rmd9f?file=/src/App.js

如果你 select 第 29 天和任何一个月，那么它有效，但如果你 select 第 30 天和 2 月，则会出现此错误，我无法找出问题所在：

Uncaught Error: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead.

密码是：

import { Button } from "@chakra-ui/button";
import {
  FormControl,
  FormErrorMessage,
  FormLabel,
} from "@chakra-ui/form-control";
import { Center, Stack } from "@chakra-ui/layout";
import { Formik, Form, useField, useFormikContext } from "formik";
import * as Yup from "yup";
import Select from "react-select";

const SelectInput = ({ label, options, ...props }) => {
  const [field, meta, helper] = useField(props);
  const { values, setFieldValue } = useFormikContext();

  return (
    <FormControl id={props.id} isInvalid={meta.touched && meta.error}>
      <FormLabel>{label}</FormLabel>
      <Select
        {...field}
        {...props}
        options={options}
        onBlur={helper.setTouched}
        value={values[field.name]}
        onChange={(value) => setFieldValue(field.name, value)}
      />
      <FormErrorMessage>{meta.error}</FormErrorMessage>
    </FormControl>
  );
};

const SignupForm = () => {
  const days = [
    { value: 29, label: "29" },
    { value: 30, label: "30" },
  ];
  const months = [
    { value: 0, label: "January" },
    { value: 1, label: "February" },
  ];

  return (
    <Formik
      initialValues={{
        day: "",
        month: "",
      }}
      validationSchema={Yup.object({
        day: Yup.object()
          .shape({
            value: Yup.number().required(),
            label: Yup.string().required(),
          })
          .when("month", {
            is: (month) => {
              return month?.value === 1;
            },
            then: Yup.object().shape({
              value: Yup.number()
                .required()
                .max(29, `This month has only 29 days`),
              label: Yup.string().required(),
            }),
          }),
        month: Yup.object().shape({
          value: Yup.number().required(),
          label: Yup.string().required(),
        }),
      })}
      onSubmit={(values, { setSubmitting }) => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }}
    >
      <Form>
        <Center>
          <Stack
            spacing={4}
            padding={4}
            width="50%"
          >
            <SelectInput
              label="Day"
              name="day"
              type="text"
              options={days}
              instanceId="unique"
            />
            <SelectInput
              label="Month"
              name="month"
              type="text"
              options={months}
              instanceId="unique"
            />
            <Button type="submit"> Register </Button>
          </Stack>
        </Center>
      </Form>
    </Formik>
  );
};

export default SignupForm;

任何帮助将不胜感激:P

Answer 1

meta.error 不保证是字符串。

如果你改变

<FormErrorMessage>{meta.error}</FormErrorMessage>

到

<FormErrorMessage>{JSON.stringify(meta.error)}</FormErrorMessage>

渲染没问题。

也没有显示错误...

Error: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead

Error: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead

javascript

reactjs

react-select

yup

formik