如何使用 Formik 和 TypeScript 在表单中没有初始值？

Question

在我的 React Typescript 应用程序中，有一个 Formik 表单，其中包含不需要填充任何值的字段（即占位符文本可见）。

我们怎样才能做到这一点？

尝试1：

在 Formik 的initialValues中，我尝试不定义任何形式最初应该为空的值。

<Formik
    initialValues={{
        itemType: 'any',
    }}
    ...
>

interface Values {
    itemType: string;
    minPrice?: number;
    maxPrice?: number;
}

但是，当用户在这些 forms 中的任何一个中键入内容时，浏览器 JS 控制台会显示警告：

index.js:1 警告：组件正在更改要控制的不受控制的输入。 这可能是由于值从未定义更改为已定义值引起的，这不应该发生。 决定在组件的生命周期内使用受控输入元素还是不受控输入元素。 更多信息： https://reactjs.org/link/controlled-components在输入

---

尝试2：

尝试在 Formik 的initialValues道具中将这些值设置为null ，

<Formik
    initialValues={{
        itemType: 'any',
        minPrice: null,
        maxPrice: null,
    }}

    ...

但 TypeScript 抛出错误：

类型“字符串”不可分配给类型“从不”。 TS2322

Type 'string' is not assignable to type 'never'.  TS2322

    66 |                 <Formik
    67 |                     initialValues={{
  > 68 |                         itemType: 'any',
       |                         ^
    69 |                         minPrice: null,

React 应用程序甚至没有启动！

---

完整代码

import { Button, Modal, Form, Row, Col } from 'react-bootstrap';
import { Formik, FormikHelpers } from 'formik';


interface Values {
    itemType?: string;
    minPrice?: number;
    maxPrice?: number;
}


export function FormModal({show, handleClose, updateFilter}: IModal): JSX.Element {
    return (
        <Modal show={show} onHide={handleClose}>
            <Modal.Body>
                <Formik
                    initialValues={{
                        itemType: 'any',
                        minPrice: null,
                        maxPrice: null,
                    }}
                    validationSchema={schema}
                    onSubmit={(
                        values: Values,
                    ) => {
                        updateFilter(values);
                        handleClose();
                    }}
                >
                    {( {values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue }) => (
                        <Form id="updateFilterForm" onSubmit={handleSubmit}>

                            <Form.Group as={Row} controlId="formItemType">
                                <Form.Label column sm="3">Item Type</Form.Label>
                                <Col sm="9">
                                    <Select 
                                        name="itemType" 
                                        options={itemTypeOptions} 
                                        onChange={option => setFieldValue("itemType", option!.value)} 
                                        onBlur={handleBlur} 
                                        values={values.itemType} 
                                    />
                                </Col>
                            </Form.Group>

                            <Form.Group as={Row} controlId="formPrice">
                                <Form.Label column sm="3">Price Range</Form.Label>
                                <Col sm="9">
                                    <Form.Row>
                                        <Col>
                                        <Form.Control 
                                            type="number" 
                                            name="minPrice" 
                                            onChange={handleChange} 
                                            onBlur={handleBlur} 
                                            value={values.minPrice} 
                                            placeholder="Min" 
                                        />
                                        </Col>
                                        <Col>
                                        <Form.Control 
                                            type="number" 
                                            name="maxPrice" 
                                            onChange={handleChange} 
                                            onBlur={handleBlur} 
                                            value={values.maxPrice} 
                                            placeholder="Max" 
                                        />
                                        </Col>
                                    </Form.Row>
                                </Col>
                            </Form.Group>

                        </Form>  
                    )}
                </Formik>
            </Modal.Body>
        </Modal>
    )
}

Answer 1

据我所知，您似乎还没有在任何地方定义您的界面。

[ ... ]
const initialValues: Values = {
   itemType: 'any',
   minPrice: undefined,
   maxPrice: undefined,
};

<Formik initialValues={initialValues} {...}>

使用接口时还记得将值设置为可选吗？ 如果您必须定义初始值，请使用未定义而不是 null。

您的应用程序现在应该通过打字稿规则并编译。