今日はuseEffectについてやっていきたいと思います。
ウェブサイトを作っていて、エラーが出たのでそれを今日はメモとして残しておこうと思います。
今回の内容
・エラーの内容
・useEffectとは
今回はこんな感じでやっていきたいと思います。
今回の内容
エラーの内容
今日はナビゲーションバーを作っていったのですが、下記のように少しエラーが出ました。
上記の画像では、SIGN UPのボタンがリロードをした時に真ん中に出てきてしまうというエラーです。
書いているコードは以下のようになっています。
// eslint-disable-next-line
import React,{useState} from 'react'
import { Link } from 'react-router-dom';
import './Navbar.css';
import { Button } from './Button';
function Navbar() {
const [click, setClick] = useState(false);
const [button, setButton] = useState(true);
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);
const showButton = () =>{
if(window.innerWidth <= 960){
setButton(false)
}else{
setButton(true);
}
};
window.addEventListener('resize', showButton);
return (
<>
<nav className="navbar">
<div className="navbar-container">
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
ISSEI <i className="fab fa-typo3" />
</Link>
<div className="menu-icon" onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
</div>
<ul className={click ? 'nav-menu active': 'nav-menu'}>
<li className='nav-item'>
<Link to='/'className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className='nav-item'>
<Link to='/services'className='nav-links' onClick={closeMobileMenu}>
services
</Link>
</li>
<li className='nav-item'>
<Link to='/products'className='nav-links' onClick={closeMobileMenu}>
products
</Link>
</li>
<li>
<Link to='/sign-up'className='nav-links-mobile' onClick={closeMobileMenu}>
Sign Up
</Link>
</li>
</ul>
{button && <Button buttonStyle='btn--outline'>SIGN UP</Button>}
</div>
</nav>
</>
);
}
export default Navbar;
import React from 'react'
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES = ['btn--primary', 'btn--outline'];
const SIZES = ['btn--medium', 'btn--large'];
export const Button = ({
children,
type,
onClick,
buttonStyle,
buttonSize
}) => {
const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle : STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize)
? buttonSize : SIZES[0];
return (
<Link to='/sign-up' className='btn-mobile'>
<button
className={`btn ＄{checkButtonStyle} ＄{checkButtonSize}`}
onClick={onClick}
type={type}>
{children}
</button>
</Link>
);
};
export default Button;{button && <Button buttonStyle='btn--outline'>SIGN UP</Button>}の部分がリロードされた時にレンダーをされますが、showButtonが呼び出されていないために、起きてしまっている問題です。
そのため、{button}がレンダーされる時にshowButtonを呼び出せるようにしていきます。
useEffectとは
useEffectは毎回のレンダー後に呼ばれるのか？ その通りです！ デフォルトでは、副作用関数は初回のレンダー時および毎回の更新時に呼び出されます。あとでカスタマイズする方法について説明します。「マウント」と「更新」という観点で考えるのではなく、「レンダーの後」に副作用は起こる、というように考える方が簡単かもしれません。React は、副作用が実行される時点では DOM が正しく更新され終わっていることを保証します。
このuseEffectを使えば、このエラーが解決されるはず。
ということで、useEffectをインポートして、使ってみます。
+ import React,{useState, useEffect} from 'react'
import { Link } from 'react-router-dom';
import './Navbar.css';
import { Button } from './Button';
function Navbar() {
const [click, setClick] = useState(false);
const [button, setButton] = useState(true);
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);
const showButton = () =>{
if(window.innerWidth <= 960){
setButton(false)
}else{
setButton(true);
}
};
+ useEffect(() => {
showButton();
}, []);
window.addEventListener('resize', showButton);上記のようにuseEffectのなかにshowButtonを入れたら無事に表示されずに済みました。
この解決方法がいいのかどうかわかりませんが、とりあえず解決できたのでOKとします。
このuseEffectの使い方が難しく、理解も難しかったので苦労しました。
もっと詳しく理解できたら噛み砕いた説明をしたいと思います。
まとめ
今日はエラーの内容を少しだけやっていきました。
ウェブサイトの作成の方で、あまりブログの方に時間を割けませんでした。。
今後もエラーの内容やその日に学んだことを多く書いていこうと思います。
最後まで読んでいただきありがとうございました。