在我使用 Formik 的 React/TypeScript 应用程序中,我收到错误
Object is possibly 'null'. TS2531
125 | <Modal.Footer>
> 126 | <Button variant="primary" type="submit" form="nicknameForm" disabled={!(formRef.current.isValid && formRef.current.dirty)}>Apply</Button>
| ^
127 | </Modal.Footer>
128 | </Modal>
129 | )
尝试将
formRef.current.isValid
更改为 formRef!.current.isValid
并将 formRef.current.dirty
更改为 formRef!.current.dirty
,但错误仍然存在。
为什么会这样,我们该如何修复这个错误?谢谢!
import React, { useState, useEffect, useRef } from 'react';
import { Button, Modal, Form } from 'react-bootstrap';
import { Formik } from 'formik';
interface IModal {
show: boolean;
handleClose: () => void;
}
export function NicknameModal({show, handleClose}: IModal) {
const formRef = useRef(null);
return (
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>My Title</Modal.Title>
</Modal.Header>
<Modal.Body>
<Formik
initialValues={{
nickname: '',
}}
innerRef={formRef}
onSubmit={(
values,
{ setSubmitting }
) => {
setSubmitting(true);
handleClose();
setSubmitting(false);
}}
>
{({values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue }) => (
<Form id="nicknameForm" onSubmit={handleSubmit}>
<Form.Group controlId="formNickname">
<Form.Label>Nickname</Form.Label>
<Form.Control type="text" name="nickname" onChange={handleChange} onBlur={handleBlur} value={values.nickname} />
</Form.Group>
</Form>
)}
</Formik>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" type="submit"
disabled={!(formRef.current.isValid && formRef.current.dirty)}
form="nicknameForm">Apply</Button>
</Modal.Footer>
</Modal>
)
}
更新:
如果将
const formRef = useRef(null);
更改为 const formRef = useRef();
,我们现在会遇到不同的错误:
Type 'MutableRefObject<undefined>' is not assignable to type '((instance: FormikProps<{ nickname: string; }> | null) => void) & MutableRefObject<undefined>'.
Type 'MutableRefObject<undefined>' is not assignable to type '(instance: FormikProps<{ nickname: string; }> | null) => void'.
Type 'MutableRefObject<undefined>' provides no match for the signature '(instance: FormikProps<{ nickname: string; }> | null): void'. TS2322
71 | nickName: '',
72 | }}
> 73 | innerRef={formRef}
| ^
74 | onSubmit={(
75 | values: Values,
76 | { setSubmitting }: FormikHelpers<Values>
您需要设置 useRef 的类型,其中 FormValues 是您的表单值
type FormValues = {};
useRef<FormikProps<FormValues>>(null);
https://github.com/formium/formik/issues/2600#issuecomment-693479057
尝试:
import { FormikProps } from "formik";
const formRef = useRef<FormikProps<any>>(null);
首先,您需要为
Formik
初始值定义一个类型:
interface HelpFormInitialValues {
destination_city: string;
cell_phone: string;
}
const initialValues: FormnameInitialValues = {
cell_phone: "",
destination_city: "",
};
然后为
ref
状态定义一个表单类型,并将表单初始值类型设置为它:
import { FormikProps } from "formik";
const formikRef = useRef<FormikProps<HelpFormInitialValues>>(null);
现在您可以在
Formik
状态下使用 ref
的所有属性,而不会出现任何 typescript
错误,并且还可以获得自动完成的好处。
if (formikRef.current) formikRef.current.resetForm();
if (formikRef.current) formikRef.current.isValid();