我在关注 this video ("JWTUser Sessions with ReactJS & GraphQL...") when at this time这家伙破坏了useParams()
方法来自 react-router-dom图书馆。
就我而言,这不起作用,因为我收到此错误:
这是此时的整个代码:
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
.
关于javascript - TypeScript 中的 useParams 不允许解构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64517983/