React ログアウトの書き方

Question

ReactでlocalStorage.clear()をするログアウトボタンを追加したいです。

下記のように書いてみましたが、
typeErrorとなります。
修正の仕方のアドバイスを頂けますと助かります。

エラー:
Home.js:155 Uncaught TypeError: Cannot read property 'logout' of undefined
at Home (Home.js:155)

import React, { useState, useEffect } from 'react';

export default function Home(props) {
	const [token, setToken] = useState(''); //authenticated

	const [user, setUser] = useState({
		username: '',
		password: ''
	});
	const [loggedInUser, setLoggedInUser] = useState('');
	const [toggle, setToggle] = useState(true);
	const handleChange = e => {
		setUser({ ...user, [e.target.id]: e.target.value });
	};

//ココから
	const logout = async e => {
		e.localStorage.clear();
		window.location.href = '/';
	};
//ココまで
	const handleLogin = async e => {
		e.preventDefault();
		try {
			const response = await fetch('/login', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(user)
			});
			const data = await response.json();
			setToken(data.token);
			setLoggedInUser(data.user.username);
			window.localStorage.setItem('token', data.token);
			window.localStorage.setItem('loggedInUser', data.user.username);
		} catch (err) {
			console.error(err);
		}
	};

	const handleRegister = async e => {
		e.preventDefault();
		try {
			const response = await fetch('/login', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(user)
			});
			const data = await response.json();
			setToken(data.token);
			setLoggedInUser(data.user.username);
			window.localStorage.setItem('token', data.token);
			window.localStorage.setItem('loggedInUser', data.user.username);
		} catch (err) {
			console.error(err);
		}
	};
	useEffect(() => {
		if (window.localStorage.getItem('token')) {
			setToken(window.localStorage.getItem('token'));
			setLoggedInUser(window.localStorage.getItem('loggedInUser'));
		}
	}, []);

	return (
		<div
			className="HomePage"
			>
			{!token ? (
				<>
					<button
						onClick={() => setToggle(!toggle)}
						className="btn btn-secondary"
					>
						{toggle
							? 'Not registered yet? Register'
							: 'Already registered? Log in here'}
					</button>
					{toggle ? (
						<form onSubmit={handleLogin} className="input-group-prepend">
							<input
								type="text"
								id="username"
								value={user.username}
								onChange={handleChange}
								className="form-control"
								placeholder="username"
							/>
							<input
								type="password"
								id="password"
								value={user.password}
								onChange={handleChange}
								className="form-control"
								placeholder="password"
							/>

							<input type="submit" value="Login" className="input-group-text" />
						</form>
					) : (
						<form onSubmit={handleRegister} className="input-group-prepend">
							<input
								type="text"
								id="username"
								value={user.username}
								onChange={handleChange}
								className="form-control"
								placeholder="username"
							/>
							<input
								type="password"
								id="password"
								value={user.password}
								onChange={handleChange}
								className="form-control"
								placeholder="password"
							/>
							<input
								type="submit"
								value="Register"
								className="input-group-text"
								id=""
							/>
						</form>
					)}
				</>
			) : (
				<>
					<div>Hello {loggedInUser},</div>
					{''}
//ココから
					<div>
						<a href="#" onClick={this.logout()}>
							Logout
						</a>
					</div>
//ココまで
				</>
			)}
		</div>
	);
}

Answer 1

そやね〜、とりまここんとこ、

- <a href="#" onClick={this.logout()}>
+ <a href="#" onClick={logout}>

this.logout()みたいに this. が必要やったんはクラスコンポーネント使ってた時代やな。あと、logout() の () は要らん。()つけると、このコンポーネントがレンダリングされた時点で、logout 関数が呼ばれてまうやん。

それと、logout を定義しているほうの、ここ

- e.localStorage.clear();
+ localStorage.clear();

e.は要らんやろ。

これでCannot read property 'logout' of undefined のエラーは解消されて、logout 呼ばれたときlocalStorage がクリアされると思うで。

あ、あと、これは関数名のリファクタやねんけど、logtout は他と合わせて、handleLogout にしといたほうがええ思うたわ。

以上ですう〜