Next.jsでUseStateについて、いまいちピンと来ていないため、簡単にまとめておきます。
#useStateとは
・変数と関数がセットになったようなもの?
・値を保存することができる
・値が更新される度に、関数自身が呼び直される
#宣言の方法
①インポートして、②宣言する
①import {useState} from 'react';
②[変数名, 関数名] = useState('');
#使い方
例えば
export default function Test(){
}
という関数の中で
const [name, setName] = useState('');
というuseStateを宣言したとする。
nameに値が入っていて、
setName('セットしたい名前')
で値を更新できる。
useStateを更新するたびに、Test()が呼ばれる。
#無限ループに注意する
useStateの動きを確認していたところ
Next.jsでToo many re-renders. React limits the number of renders to prevent an infinite loop.というエラーが出ました。
import * as React from 'react';
import {useState} from 'react';
export default function Test(){
const [name, setName] = useState('');
setName('Piro');
return(
<>
<p>私の名前は{name}です</p>
</>
)
}
setName('Piro');
のところで、どうも無限ループに入ってしまっているようです。
setName()の前にログを仕込んでみると、
50回ほど呼ばれたところで、エラーを出して処理を止めていました。
useStateを更新するとreturn()の中だけが更新されると勘違いしていましたが、
どうもTest()自体が呼び直されるようですね。
#対策:関数の中に入れる
対策として、ボタンを押すと呼ばれる関数の中に、useStateの処理を入れました。
import * as React from 'react';
import {useState} from 'react';
export default function Test(){
const [name, setName] = useState('Piro'); //初期値を設定
console.log("Test()がCall");
//setName('Piro');
const changeName = () => {
setName('竜騎士ガルザーグ');
}
return(
<>
<p>私の名前は{name}です</p>
<button type="button" onClick = {changeName}>実は本名は</button>
</>
)
}
これで、ボタンを押した時だけchangeNameが呼ばれて、
setNameで更新するため、無限ループを防ぐことができます。
「実は本名は」のボタンを押すと・・・↓
となります。