属性'token'在类型 'PropsWithChildren<WithUrqlProps>' 中缺失，但在类型 '{ token: string; }' 中是必需的

Question

我在导出默认值为UrqlClient(createUrqlClient(的(ChangePassword(处得到此错误：

"FunctionComponent<｛token:string；｝>amp；｛getInitialProps？(context:NextPageContext(：｛token:string；｝| Promise<｛token:string；｝>；｝'不可分配给'NextComponentType<类型的参数；PartialNextContext，｛｝，｛}>'。类型'FunctionComponent<｛token:string；｝>amp；｛getInitialProps？(context:NextPageContext(：｛token:string；｝| Promise<｛token:string；｝>；｝'不可分配给类型"FunctionComponent&｛getInitialProps？(context:PartialNextContext(：｛｝|承诺<｛｝>；｝'。类型'FunctionComponent<｛token:string；｝>amp；｛getInitialProps？(context:NextPageContext(：｛token:string；｝| Promise<｛token:string；｝>；｝'不可分配给类型"FunctionComponent"。参数"props"one_answers"props"的类型不兼容。类型"PropsWithChildren"不可分配给类型"Props WithChildren<｛token:string；｝>'。类型"PropsWithChildren"中缺少属性"token"，但类型"｛token:string；｝"中需要该属性。ts(2345(

这是代码：

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);

Answer 1

我有一个快速的解决你的类型问题

export default withUrqlClient(createUrqlClient)(ChangePassword as any);

通过将changePassword类型转换为任意类型，它在编译时获得类型，并且不会显示任何正在升温的

(注意：如果您按照此操作，将不会自动完成或键入(

Answer 2

我可以用不同的方式键入我的，我希望这是正确的方式

export default withUrqlClient(createUrlClient)(
ChangePassword as FunctionComponent<
PropsWithChildren<WithUrqlProps | { token: string }>
>
);

其中类型：

• FunctionComponent、PropsWithChildren是从"；反应">
• CCD_ 3是从"；下一个urql">

Answer 3

您可以从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);