Formik Storybook：对象作为 React 子对象无效

Question

我正在尝试为 TextFormField 添加故事书故事，TextFormField 是表单中使用的输入字段。我收到一条错误消息 Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

我有一个简单的故事，我不明白是什么原因造成的。 TextFormField.tsx 的文件已经存在，并且在整个应用程序中都在毫无问题地使用。直到我添加这个故事文件时才出现这个错误。

故事-

export default {
    title: 'Form/TextFormField',
    component: TextFormField,
    decorators: [withDesign, withFormik],
    parameters: {
        design: {
            type: 'figma',
            url: '#',
        },
        formik: {
            initialValues: {},
        },
    },
} as Meta;

const Template: Story<ComponentProps<typeof TextFormField>> = (args) => (
    <div style={{width: '200px'}}>
        <CustomThemeProvider>
            <TextFormField {...args} />
        </CustomThemeProvider>
    </div>
);

export const Default = Template.bind({});
Default.args = {
    type: 'default',
    placeholder: 'Text has been entered',
};

TextFormField.tsx -

type Props = {
    id?: string;
    type?: string;
    name?: string;
    label?: string;
    isDisabled?: boolean;
    maxLength?: number;
    isMultiline?: boolean;
    validate?: boolean;
    inputProps?: InputBaseComponentProps;
}

const TextFormField = ({ id, type, label, name, isDisabled, maxLength, isMultiline = false, validate }: Props): JSX.Element => {
    const classes = useStyles();
    return (
        <div className="TextFormField">
            {label && (
                <InputLabel htmlFor={name} className={classes.label}>
                    {label}
                </InputLabel>
            )}

            <Field
                component={TextField}
                name={name}
                type={type}
                variant="outlined"
                className={classes.textField}
                id={id}
                disabled={isDisabled}
                multiline={isMultiline}
                validate={validate}
                inputProps={{ 'data-testid': id, ...(maxLength ? { maxLength } : {}) }}
            />
        </div>
    );
};

export default TextFormField;

Answer 1

将此添加到 Default.args：

name: 'name'

Formik Storybook：对象作为 React 子对象无效

Formik Storybook: Objects are not valid as a React child

reactjs

storybook

formik

react-hooks