お世話になります。
ReactでToo many re renders React limits the number of renders to prevent an infinite loopというエラーが出て困っています。
ネットで調べたら、アロー関数を使うと無限ループを阻止できるとあったので使ってみましたが、今度はアロー関数を使って呼ぶ関数が全く呼ばれなくなりました。どうすれば問題なく本エラーを解決できるかアドバイス頂きたいです。
現在作っているアプリはノートアプリで、ノートのタイトルに文字入力がされてかつ、タイトルからフォーカスが外れた時にノートが複製されるようにしたいのですが、上記のエラーのため実現できていません。
本問題は、以下のApp.jsxのreturn内のif文の() => addList();で発生しています。
開発環境は以下です。
・OS:Windows10
・Reactのバージョン:React18
・エディタ:VSCode
App.jsx(※index.jsでレンダリングしているコンポーネント)
import { Fragment } from "react";
import { useContext, useState, useEffect } from "react";
import { Header } from "./components/Header";
import { Footer } from "./components/Footer";
import { Note } from "./components/Note";
import { OnBlurredFlagContext } from "./components/providers/OnBlurredFlagProvider";
import { IsTextFlagContext } from "./components/providers/IsTextFlagProvider";
export const App = () => {
const { onBlurredFlag, setOnBlurredFlag } = useContext(OnBlurredFlagContext);
const { isText, setIsTextFlag } = useContext(IsTextFlagContext);
const [keyIndex, setKeyIndex] = useState(0);
const [keyList, setKeyList] = useState([]);
const addList = () => {
setKeyIndex((prev) => prev + 1);
setKeyList((prevList) => [keyIndex, ...prevList]);
};
useEffect(() => addList(), []);
const setList = (value) => <Note key={value}></Note>;
return (
<Fragment>
<Header></Header>
{(() => {
if (onBlurredFlag === true && isText === true) {
{
() => addList();
}
}
return keyList.map(setList);
})()}
<Footer></Footer>
</Fragment>
);
};
Note.jsx(※ノートのタイトル(input)と本文(textarea)コンポーネント)
import NoteModuleScss from "./Note.module.scss";
import { useContext } from "react";
import { OnBlurredFlagContext } from "./providers/OnBlurredFlagProvider";
import { IsTextFlagContext } from "./providers/IsTextFlagProvider";
export const Note = (props) => {
const { onBlurredFlag, setOnBlurredFlag } = useContext(OnBlurredFlagContext);
const { isText, setIsTextFlag } = useContext(IsTextFlagContext);
const checkIsText = (text) => {
if (text.target.value != "") {
setIsTextFlag(true);
} else {
setIsTextFlag(false);
}
};
return (
<div className={NoteModuleScss.below}>
<input
type="text"
placeholder="タイトルを入力"
className={NoteModuleScss.header}
onBlur={() => setOnBlurredFlag(true)}
onChange={(text) => {
checkIsText(text);
}}
/>
<p></p>
<textarea
rows="4"
cols="25"
className={NoteModuleScss.body}
onBlur={() => setOnBlurredFlag(true)}
/>
</div>
);
};
2022/06/25更新:
以下のコードで書き換えてもsetKeyIndexとsetKeyListが呼ばれませんでした。
{(() => {
if (onBlurredFlag === true && isText === true) {
{
() => setKeyIndex((prev) => prev + 1);
() => setKeyList((prevList) => [keyIndex, ...prevList]);
}
}
return keyList.map(setList);
})()}
また、以下のサイトの、「更新した値で表示するには?」の「1.新しい値を変数で保持する」と「2.関数型の更新を使う」を試してみましたが、上手くいきませんでした。アドバイスを頂けたら幸いです。