PROGRAMMING

useEffectを使ってみた【React.js】

今日は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の使い方が難しく、理解も難しかったので苦労しました。

もっと詳しく理解できたら噛み砕いた説明をしたいと思います。

まとめ

今日はエラーの内容を少しだけやっていきました。

ウェブサイトの作成の方で、あまりブログの方に時間を割けませんでした。。

今後もエラーの内容やその日に学んだことを多く書いていこうと思います。

最後まで読んでいただきありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.