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

Question

在我的React Typescript应用中，有一个Formik表单，它的字段不需要填充任何值(即占位符文本是可见的)。

我们如何做到这一点?

尝试1:

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

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

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

但是，当用户在这些表单中输入内容时，浏览器JS控制台显示警告:

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

---

尝试2:

尝试在Formik的initialValuesprop中设置这些值为null，

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

但是TypeScript抛出错误:

类型'string'不能赋值给类型'never'。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} {...}>

当使用接口时，还记得何时将值设置为可选的吗?如果必须定义一个初始值，请使用undefined而不是null。

你的应用程序现在应该通过typscript规则并编译。