TypeScript：'this'隐式具有类型'any'，因为它没有类型注释

Question

我正在努力使用react和Typescript重定向?我知道你可以告诉你的TS配置不要使用隐式的这个关键字，但我相信这不是"修复"的正确方法。它，只是修补它。

错误:

'this' implicitly has type 'any' because it does not have a type annotation.

:

this.props.history.push("/home");

完整组件:

import React, {useState} from "react";

export default function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const [loggingIn, setLoggingIn] = useState(false);
async function handleSubmit (event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
setErrorMessage('');
setLoggingIn(true);
await fetch('https://localhost:5001/connect/token', {
method: 'POST',
body: new URLSearchParams({
'client_id': 'cascade-frontend',
'client_secret': 'secret',
'grant_type': 'password',
'scope': 'cascade.api.write',
'username': email,
'password': password,
}),
})
.then(async (response) => {
if (response.ok) {
this.props.history.push("/home");
} else {
setErrorMessage((await response.json())['error_description']);
}
});
setLoggingIn(false);
}
return (
<div>
<div className="flex h-screen">
<div className="m-auto md:w-1/3">
<div className="shadow font-medium bg-white rounded-md p-10 pt-9 items-center justify-center">
{ errorMessage &&
<div className="bg-red-500 hover:bg-red-600 text-white py-4 px-4 text-center rounded-md mb-10">
{errorMessage}
</div> }
<form className="w-full mt-3" action="#" method="POST" onSubmit={handleSubmit}>
<div>
<label className="block text-gray-700">Email Address</label>
<input type="email" name="" id="" placeholder="Enter Email Address" className="w-full px-4 py-3 rounded-lg mt-2 border focus:border-blue-500 focus:outline-none" onChange={e => setEmail(e.target.value)} required/>
</div>
<div className="my-6">
<label className="block text-gray-700">Password</label>
<input type="password" placeholder="Enter Password" className="w-full px-4 py-3 rounded-lg mt-2 border focus:border-blue-500 focus:outline-none" onChange={e => setPassword(e.target.value)} required/>
</div>
<button disabled={loggingIn} type="submit" className="group relative w-full flex justify-center py-3 px-4 border border-transparent font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mt-8 disabled:opacity-50">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg> &nbsp; Sign In
</button>
</form>
</div>
</div>
</div>
</div>
);
}

Answer 1

因为你已经写了一个函数组件，所以不需要使用这个关键字。你可以在组件参数中添加props:

export default function Login(props) {

，将this.props.history.push("/home");写成props.history.push("/home");。

您甚至可以将历史组件解构为:

export default function Login({history}) {

用history.push("/home")

Answer 2

因为您编写了函数式组件。没有这个关键字。试试这个:

props.history.push("/home");

还必须将props传递给组件。

import React, {useState} from "react";
export interface LoginProps extends React.ComponentProps<any> {}
const Login: React.FC<LoginProps> = (props) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const [loggingIn, setLoggingIn] = useState(false);
async function handleSubmit (event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
setErrorMessage('');
setLoggingIn(true);
await fetch('https://localhost:5001/connect/token', {
method: 'POST',
body: new URLSearchParams({
'client_id': 'cascade-frontend',
'client_secret': 'secret',
'grant_type': 'password',
'scope': 'cascade.api.write',
'username': email,
'password': password,
}),
})
.then(async (response) => {
if (response.ok) {
this.props.history.push("/home");
} else {
setErrorMessage((await response.json())['error_description']);
}
});
setLoggingIn(false);
}
return (
<div>
<div className="flex h-screen">
<div className="m-auto md:w-1/3">
<div className="shadow font-medium bg-white rounded-md p-10 pt-9 items-center justify-center">
{ errorMessage &&
<div className="bg-red-500 hover:bg-red-600 text-white py-4 px-4 text-center rounded-md mb-10">
{errorMessage}
</div> }
<form className="w-full mt-3" action="#" method="POST" onSubmit={handleSubmit}>
<div>
<label className="block text-gray-700">Email Address</label>
<input type="email" name="" id="" placeholder="Enter Email Address" className="w-full px-4 py-3 rounded-lg mt-2 border focus:border-blue-500 focus:outline-none" onChange={e => setEmail(e.target.value)} required/>
</div>
<div className="my-6">
<label className="block text-gray-700">Password</label>
<input type="password" placeholder="Enter Password" className="w-full px-4 py-3 rounded-lg mt-2 border focus:border-blue-500 focus:outline-none" onChange={e => setPassword(e.target.value)} required/>
</div>
<button disabled={loggingIn} type="submit" className="group relative w-full flex justify-center py-3 px-4 border border-transparent font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mt-8 disabled:opacity-50">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg> &nbsp; Sign In
</button>
</form>
</div>
</div>
</div>
</div>
);
}
export default Login;