如何解决'PropsWithChildren<WithUrqlProps>' 类型中缺少属性 'token',但类型 '{ token: string; }'
我在导出默认值 withUrqlClient(createUrqlClient)(ChangePassword) 中的 (ChangePassword) 处收到此错误:
'FunctionComponent & { getinitialProps?(context: NextPageContext): { token: string; } |承诺; }' 不可分配给类型为“NextComponentType
代码如下:
import { NextPage } from "next";
import { Wrapper } from "../../components/Wrapper";
import { Formik,Form } from "formik";
import { toErrorMap } from "../../utils/toErrorMap";
import { InputField } from "../../components/InputField";
import { Box,Button,Link,Flex } from "@chakra-ui/react";
import { useChangePasswordMutation } from "../../generated/graphql";
import { useRouter } from "next/router";
import { withUrqlClient } from "next-urql";
import { createUrqlClient } from "../../utils/createUrqlClient";
import NextLink from "next/link";
const ChangePassword: NextPage<{ token: string }> = ({ token }) => {
const router = useRouter();
const [,changePassword] = useChangePasswordMutation();
const [tokenError,setTokenError] = useState("");
return (
<Wrapper variant="small">
<Formik
initialValues={{ newPassword: "" }}
onSubmit={async (values,{ setErrors }) => {
const response = await changePassword({
newPassword: values.newPassword,token,});
if (response.data?.changePassword.errors) {
const errorMap = toErrorMap(response.data.changePassword.errors);
if ("token" in errorMap) {
setTokenError(errorMap.token);
}
setErrors(errorMap);
} else if (response.data?.changePassword.user) {
// worked
router.push("/");
}
}}
>
{({ isSubmitting }) => (
<Form>
<InputField
name="newPassword"
placeholder="new password"
label="New Password"
type="password"
/>
{tokenError ? (
<Flex>
<Box mr={2} style={{ color: "red" }}>
{tokenError}
</Box>
<NextLink href="/forgot-password">
<Link>click here to get a new password</Link>
</NextLink>
</Flex>
) : null}
<Button
mt={4}
type="submit"
isLoading={isSubmitting}
variantColor="teal"
>
change password
</Button>
</Form>
)}
</Formik>
</Wrapper>
);
};
ChangePassword.getinitialProps = ({ query }) => {
return {
token: query.token as string,};
};
export default withUrqlClient(createUrqlClient)(ChangePassword);
解决方法
我有一个快速的方法可以解决您的类型问题
export default withUrqlClient(createUrqlClient)(ChangePassword as any);
通过将 changePassword 类型转换为任何类型,它在编译时获得类型并且不显示任何升温
(注意:如果您按照此操作,将不会自动完成或键入)
,我可以用不同的方式打字,我希望这是正确的方式。我的方法是:
export default withUrqlClient(createUrlClient)(
ChangePassword as FunctionComponent<
PropsWithChildren<WithUrqlProps | { token: string }>
>
);
类型:
-
FunctionComponent
、PropsWithChildren
是从“react”导入的 -
WithUrqlProps
是从“next-urql”导入的
您可以从 useRouter
而不是 getInitialProps
获取查询令牌。
import { Box,Button,Flex,Link } from "@chakra-ui/react";
import { Form,Formik } from "formik";
import { withUrqlClient } from "next-urql";
import { useRouter } from "next/router";
import React,{ useState } from "react";
import InputField from "../../components/InputField";
import Wrapper from "../../components/Wrapper";
import { useChangePasswordMutation } from "../../generated/graphql";
import { createUrqlClient } from "../../utils/createUrqlClient";
import { toErrorMap } from "../../utils/toErrorMap";
import NextLink from "next/link";
const ChangePassword = () => {
const [,changePassword] = useChangePasswordMutation();
const [tokenError,setTokenError] = useState("");
const router = useRouter();
const { token } = router.query;
return (
<Wrapper variant="small">
<Formik
initialValues={{ newPassword: "" }}
onSubmit={async (values,{ setErrors }) => {
const response = await changePassword({
newPassword: values.newPassword,token: token as string,});
if (response.data?.changePassword.errors) {
const errorMap = toErrorMap(response.data.changePassword.errors);
if ("token" in errorMap) {
setTokenError(errorMap.token);
}
setErrors(errorMap);
} else if (response.data?.changePassword.user) {
router.push("/");
}
}}
>
{({ isSubmitting }) => (
<Form>
<InputField
name="newPassword"
placeholder="new password"
label="New Password"
type="password"
/>
{tokenError ? (
<Flex>
<Box mr={2} color="red">
{tokenError}
</Box>
<NextLink href="/forgot-password">
<Link>click here to get a new one</Link>
</NextLink>
</Flex>
) : null}
<Box mt={4}>
<Button type="submit" isLoading={isSubmitting} colorScheme="teal">
change password
</Button>
</Box>
</Form>
)}
</Formik>
</Wrapper>
);
};
export default withUrqlClient(createUrqlClient)(ChangePassword);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。