reactjs - TypeScript：“this”隐含类型“any”，因为它没有类型注释

Question

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

错误：

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

标签： reactjstypescript

Answer 1

因为您编写了组件功能。没有这个关键字。尝试这个：

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;