0

お世話になります。
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.関数型の更新を使う」を試してみましたが、上手くいきませんでした。アドバイスを頂けたら幸いです。

https://zenn.dev/syu/articles/3c4aa813b57b8c

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。