在我使用 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
关于javascript - 对象可能是 'null' : TypeScript, React useRef & Formik innerRef,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66145167/
相关文章:
haskell - 为什么 map 使用的这个函数需要返回一个(单例)列表而不是一个元素?
json - 未处理的异常 : type '_InternalLinkedHashMap
flutter - 如何根据 flutter 中的文本高度调整容器高度?
reactjs - 有没有 Ionicons : Icon props?
c++ - 为什么需要 std::make_unique 来初始化成员 std::unique 数组
c# - 如何使 IEnumerable 和 IQueryable 异步?