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

Question

我很难用react和打字记录来重定向吗？我知道您可以告诉您的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

因为您已经编写了一个函数组件，所以不需要使用这个关键字。可以将道具添加到组件参数中，如下所示：

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;