【React】関数コンポーネントにcomponentDidMount的なものを使いたい
Next.js(React)の関数コンポーネントにライフサイクルフックであるcomponentDidMount的な役割を持つ何かを実装したいときには、
useEffect(() => { ... } , []);
が使えます。
以下は一例です。
import { db } from '../lib/db'; import React, { useEffect } from 'react'; // importしておく import Link from 'next/link'; import Header from '../components/shared/Header'; import Footer from '../components/shared/Footer'; import SiteDesctiption from '../components/index/Site-description'; import Wallpaper from '../components/index/Wallpaper'; import GridList from '@material-ui/core/GridList'; import GridListTile from '@material-ui/core/GridListTile'; import GridListTileBar from '@material-ui/core/GridListTileBar'; import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ popularArtists: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around', overflow: 'hidden', backgroundColor: theme.palette.background.paper, }, gridList: { flexWrap: 'nowrap', transform: 'translateZ(0)', }, })); const Index = ({fanPages}) => { const classes = useStyles(); // こんな感じで関数コンポーネントがマウントした際に行わせたい処理を書いておく useEffect(() => { console.log("hello") }, []); return ( <> <Header /> <Wallpaper /> <SiteDesctiption /> <div> <h3>アーティスト一覧</h3> <div className={classes.popularArtists}> <GridList cellHeight={160} className={classes.gridList} cols={3}> {fanPages.map(fanPage => <GridListTile key={fanPage.id} cols={fanPage.cols || 1}> <Link href="/p/[detailid]" as={`/p/${fanPage.id}`}> <img src="../static/popular-artist-img.jpg" /> </Link> <GridListTileBar title={fanPage.artistName} /> </GridListTile> )} </GridList> </div> </div> <Footer /> </> ); } Index.getInitialProps = async() => { let result = await db.collection('fanPages') .get() .then(snapshot => { let data = [] snapshot.forEach((doc) => { data.push( Object.assign({id: doc.id}, doc.data()))}) return data }).catch(error => { return [] }) return {fanPages: result} }; export default Index;