问题描述
当我在this video时,那个家伙从this time库中解构了useParams()
方法时,我一直在关注react-router-dom(“带有ReactJS和GraphQL ...的JWTUser会话”)。
在我的情况下,由于出现此错误,该操作不起作用:
这是此时的全部代码:
import React,{ useState,useContext } from 'react';
import { useParams,useHistory } from 'react-router-dom';
import { useConfirmMutation } from '../gql/generated/graphql';
import { AppStateContext } from './provider';
export const Confirm: React.FC = () => {
const history = useHistory();
const { appSetAuthToken,appClearauthToken,gqlError } = useContext(AppStateContext);
const [show,setShow] = useState(false);
const [email,setEmail] = useState('');
const [confirm] = useConfirmMutation();
const { token } = useParams();
const handleFormSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
setShow(false);
appSetAuthToken(token);
const { data } = await confirm({ variables: email });
} catch {
}
};
if (token === undefined || token === '')
return <div>Enlace de confirmación de usuario inválido</div>;
return (
<div>
<div>Página de confirmación de usuario</div>
{show ? <div>{gqlError.msg}</div> : undefined}
<form>
<div>
<input
value={email}
placeholder='Correo electrónico'
type='email'
onChange={e => { setEmail(e.target.value); }}
/>
</div>
<button type='submit'>Confirmar</button>
</form>
</div>
);
};
我也曾在CodeSandbox上尝试过相同的方法,但是它可以工作。不确定,我的错误在哪里。你能看到那个错误吗?
解决方法
useParams
是通用的。您需要通过指定泛型的值来告知Typescript您正在使用哪些参数:useParams<MyParams>()
;您的情况是:
const { token } = useParams<{token?: string}>();
其中说token
是string
或undefined
。
是的,打字稿不能解构像 {}
这样的普通普通对象。
但是 any
的作用就像一个魅力。
const { token } = useParams() as any