[英]Object is possibly 'null': TypeScript, React useRef & Formik innerRef
In my React/TypeScript app that uses Formik, I am getting the error在我使用 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 | )
Tried changing formRef.current.isValid
to formRef..current.isValid
and formRef.current.dirty
to formRef..current.dirty
but the error persists.尝试将
formRef.current.isValid
更改为formRef..current.isValid
并将formRef.current.dirty
为formRef..current.dirty
但错误仍然存在。
Why is this so, and how can we fix this error?为什么会这样,我们如何解决这个错误? Thank you!
谢谢!
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>
)
}
UPDATE:更新:
If const formRef = useRef(null);
如果
const formRef = useRef(null);
is changed to const formRef = useRef();
更改为
const formRef = useRef();
, we now encounter a different error: ,我们现在遇到了一个不同的错误:
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>
You need to set type for useRef, where FormValues is your form values您需要为 useRef 设置类型,其中 FormValues 是您的表单值
type FormValues = {};
useRef<FormikProps<FormValues>>(null);
https://github.com/formium/formik/issues/2600#issuecomment-693479057 https://github.com/formium/formik/issues/2600#issuecomment-693479057
Try with:尝试:
import { FormikProps } from "formik";
const formRef = useRef<FormikProps<any>>(null);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.