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

Question

在导出默认withUrqlClient(createUrqlClient)(ChangePassword)：中，我在(ChangePassword)处得到这个错误

类型为‘

：FunctionComponent<{ token: string；}> &{getInitialProps？&{getInitialProps？(上下文: NextPageContext)：{getInitialProps: string；} Promise<{ token: string；}>；}’}‘的FunctionComponent<参数不能分配给类型'NextComponentType’‘的参数。键入'FunctionComponent<{ token: string；}> &{getInitialProps？&{getInitialProps？(上下文: NextPageContext)：{令牌: string；}{ Promise<{ token: string；}>；}‘’不能分配到键入'FunctionComponent &{getInitialProps？(上下文: PartialNextContext)：{} Promise<{}>；}‘。键入'FunctionComponent<{ token: string；}> &{getInitialProps？&{getInitialProps？(上下文: NextPageContext)：{getInitialProps:NextPageContext；} Promise<{ token: string；}>；}‘’不能分配到键入'FunctionComponent‘。参数的类型‘道具’和‘道具’是不相容的。类型'PropsWithChildren‘不能分配到键入'PropsWithChildren<{ token: string；}>’。属性'token‘在'PropsWithChildren’类型中缺失，但在类型'{ 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从"react"
• WithUrqlProps导入，从"next-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);