0

React Bootstrap 在Formik中选择多个显示错误，因为它需要一个字符串但返回数组

错误：警告：如果为真，value则提供给的道具必须是一个数组。multiple

检查FormControl.

我相信错误出现在 Formik 内部的 FormControl.d.ts 上，因为它只接受字符串作为类型

这是 Formik 公开的接口

    export interface FormControlProps {
      innerRef?: React.LegacyRef<this>;
      size?: 'sm' | 'lg';
      plaintext?: boolean;
      readOnly?: boolean;
      disabled?: boolean;
      value?: string; // <-- it should also receive string[] ?
      onChange?: React.FormEventHandler<this>;
      type?: string;
      id?: string;
      isValid?: boolean;
      isInvalid?: boolean;
    }

这是我试图从中获得专业知识的文件

    import React from 'react';
    import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap';
    import { connect } from 'react-redux';
    import { Formik } from 'formik';
    import styled from 'styled-components';
    import * as Yup from 'yup';

    const ExpertSignUpSchema = Yup.object().shape({
        expertise: Yup.array()
            .of(Yup.string())
            .min(1)
            .required('Required'),
    });

    const ExpertSignUpPage: React.FC = () => (
        <Container fluid>
            <Row>
                <Col md={4} />
                <Col>
                    <CardWrapper>
                        <Card>
                            <Card.Header as="h5">Expert Registration</Card.Header>
                            <Card.Body>
                                <Formik
                                    initialValues={{
                                        expertise: [''],
                                    }}
                                    validationSchema={ExpertSignUpSchema}
                                    onSubmit={(values, { setSubmitting }) => {
                                        console.log(values);
                                        setSubmitting(false);
                                    }}
                                    render={({
                                        values,
                                        errors,
                                        touched,
                                        handleBlur,
                                        handleChange,
                                        handleSubmit,
                                        isSubmitting,
                                    }) => (
                                        <Form noValidate onSubmit={handleSubmit}>
                                                <Form.Control
                                                    as="select"
                                                    multiple
                                                    name="expertise"
                                                    onChange={handleChange}
                                                    onBlur={handleBlur}
                                                    value={values.expertise} // <--- it should allow an array of strings, currently the code won't compile or won't update the form value as it has multiple in the form control
                                                    isValid={touched.expertise && !errors.expertise}
                                                    isInvalid={!!errors.expertise}
                                                >
                                                    <option value="YOGA">Yoga</option>
                                                    <option value="PERSONAL_TRAINER">Personal Trainer</option>
                                                    <option value="LIFE_COACH">Life Coach</option>
                                                    <option value="NUTRITIONIST">Nutritionist</option>
                                                </Form.Control>
                                            </Form.Group>
                                            <Button
                                                variant="outline-primary"
                                                type="submit"
                                                block={true}
                                                disabled={isSubmitting}
                                            >
                                                Register
                                            </Button>
                                        </Form>
                                    )}
                                />
                            </Card.Body>
                        </Card>
                    </CardWrapper>
                </Col>
                <Col md={4} />
            </Row>
        </Container>
    );

    export default connect(
        null,
        null,
    )(ExpertSignUpPage);

    const CardWrapper = styled.div`
        margin-top: 5rem;
    `;

由于某种原因，当我将定义文件更新为 string | 时，我什至无法获取数组中的值。细绳[]。

4

0 回答 0