react someを使った条件分岐でループエラーになってしまう。

Question

配列の中身をmapで回してisShowDataでstateで管理しているmessageDataと比較して同じものがあれば表示せず、違う値なら表示したいです。
stateのmessageDateには同じ値が入らないようにしたいです
以下のように書いたのですがループのエラーになってしまいます。
自分ではどこがおかしいのかが全然わからないのでご教授お願いしたいです。
わかりやすく教えてくれる人よろしくお願いします。

//エラー内容
Unhandled Runtime Error
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

const Test: FunctionComponent = () => {
  const [messageDate, setMessageDate] = useState<string[]>([]);
  const dates = ['2012/11/11', 2012/11/11','2012/11/12','2012/11/12','2012/11/13'];
  const isShowDate = (date: string) => {
    if (messageDate.length === 0) {
      return true;
    }
    const isDate = messageDate.some((d) => d != date);
    return isDate;
  };
  const　AddDate = (date: string) => {
    const NewMessageDate = messageDate;
    NewMessageDate.push(date);
    setMessageDate(NewMessageDate);
    return date;
  };
  return (
    <>
      {dates.map((date, i) => (
        <>{isShowDate(date) && <div key={i}>{addDate(date)}</div>}</>
      ))}
    </>
  );
};

export default Test;

Answer 1

JSXの中でaddDate(date)を書いているのはどういう意図でしょうか。

書いたとおりに解釈すると、このコンポーネントを描画しようとすると、その瞬間にaddDateが呼び出されてsetMessageDateが行われ、また描画が行われます。無限ループしています。

Comments

[aaayyy]

isShowDateでmessageDateと同じ値かを比べて違う値ならaddDateでその値をstateに保存して表示したかったです

[aaayyy]

どうゆうふうに書けば無限ループを逃れることができるのでしょうか？

[maisumakun]

それは描画されるJSXの中でやるべきことではありません。useEffectなどの中で行ってください。

[maisumakun]

（というより、固定の配列のdatesを使って、ユーザーインタラクションもなく表示する状況下で、stateを必要とする理由が見えてこないです）

[aaayyy]

わかりやすく固定の配列としているだけで本当はデータから取得した配列を使います！！
わかりにくくてすいません

[maisumakun]

> 本当はデータから取得した配列を使います！！

それはPropsで渡されるのですか？それとも、コンポーネント内から取得してくるのですか？

[aaayyy]

propsで渡ってきます

[maisumakun]

でしたら、stateは不要です。mapなりfilterなりを使って適切な配列を作ってください（何度も実行されるのが気になるならuseMemoも有効です）。

[aaayyy]

<>
{dates.map((date, i) => (
<>{isShowDate(date) && <div key={i}>{addDate(date)}</div>}</>
))}

[aaayyy]

上記のとことでmapを使っています！！

[maisumakun]

JSXより手前で行ってください。

[aaayyy]

えーーとどうゆうことでしょう？
mapを使って何をしたらいいのでしょうか？
return内でmapを使っていて他にも使う？？？
mapで条件分岐を（isDate）のようなことをするということですか？

[maisumakun]

適当に配列操作をして「出力したい形の配列」を作って、JSXではそれを出力する（そちらでもmapは使う）、という形を取るのが適切です。

まずは、JSXのことは一旦忘れて、得られたpropから出力したい値の配列を作るコードを書いてください。

[maisumakun]

（出力したい値の配列を作る際に、もちろん「空配列を作って、元の配列をループで回しながら必要な値を入れていく」というような、mapなどの関数に頼らない手段を使っても構いません）

[aaayyy]

<>
{dates.map((date, i) => (
<>{isShowDate(date) && <div key={i}>{addDate(date)}</div>}</>
))}

[aaayyy]

上記のmapは無視するということでしょうか？

[aaayyy]

適当に配列操作をして「出力したい形の配列」を作って、JSXではそれを出力する。というのがよくかりません。配列をmapで回していてまた配列を回すということでしょうか？

[maisumakun]

いちおう確認しますが、「クリックしたら配列に値を追加する」ようなコードを書きたいわけではない、というのは正しいですか？

[aaayyy]

はい！！そうです

[maisumakun]

今のdatesの配列に対して、どのような出力をしたいのですか？

[aaayyy]

やりたいこと
datesの中の日付をstateに保存する。(同じ値は保存しない)
日付を表示する。（同じ値の時は表示しない）

[aaayyy]

上記のような出力をしたいです

[maisumakun]

内部から変更しないのであれば、stateは不要です。「同じ値を除外した配列」を作って、JSX内部ではそれをmapして出力してください。

[maisumakun]

> 配列をmapで回していてまた配列を回すということでしょうか？

はい、配列を作るときと出力する時の2回ループさせます（一度で済ませられなくもないですが、分けたほうがやりやすいです）。

[aaayyy]

えーーと連続してmapで表示したいわけではなく、同じものの時は何も表示したくないです

[maisumakun]

> 同じものの時は何も表示したくないです

「同じ値を除外した配列」を作れば、重複した値については何も表示されないと思うのですが…違いますか？

[aaayyy]

から列を表示したいです

[aaayyy]

{dates.map((date, i) => (
<>{isDate(m) && <div key={i}>{addDate(date)}</div>}</>
))}

[maisumakun]

> から列を表示したいです

それを先に言ってほしかったです。

[aaayyy]

あ。すいません、、

[maisumakun]

といっても、「出力したい形の配列」を作る、という方針はそのままで可能です。出力したくないものは空文字列に置き換えてしまえばいいのです。

[aaayyy]

{dates.map((date, i) => (
<>{isDate(date) && <div key={i}>{addDate(date)}</div>}</>
))}

[maisumakun]

えっと、あいかわらずJSXを書き続けているのはどういうことでしょうか？

[aaayyy]

上記のmapはいらないのでしょうか？

[aaayyy]

えーーと。すいません。結局どこを直したらいいのでしょうか？

[maisumakun]

> 上記のmapはいらないのでしょうか？

map自体は必要ですが、もっと単純な形になります。

[aaayyy]

うーーん。難しいです、、
正直まだどこを修正したらいいのかがわかっていません。
mapを単純なかたち？？mapにはいろいろな種類があるのでしょうか？

[aaayyy]

mapの種類が違うからできていないということですか？

[maisumakun]

> えーーと。すいません。結局どこを直したらいいのでしょうか？

いったんJSXから離れて、先に「出力したい形の配列」を作ってください。JSXのことを考えるのはそれからです。

[maisumakun]

> 正直まだどこを修正したらいいのかがわかっていません。

プログラムの構造自体が間違っているので、根本的にやり直す必要があります（まず、stateが不要ですし、ましてやそれをJSXの中から変更するという構造では正常に動作しません）。

[aaayyy]

直したいところはループしているところを直したいです。

[aaayyy]

やりたいこと
datesの中の日付をstateに保存する。(同じ値は保存しない)
日付を表示する。（同じ値の時は表示しない）

[maisumakun]

> mapを単純なかたち？？mapにはいろいろな種類があるのでしょうか？

そういうわけではありませんが、「出力したい形の配列」を事前に作っておけば、JSX内のmapではそれを書き出すだけになります。

[maisumakun]

改めての確認ですが、stateを使うことにこだわっているのは、「将来的に内部から変更する可能性がある」、もしくは「なにかの課題でstateを使うことを要求されている」など、何かしらの理由はあるのでしょうか？

そうでなければ、stateを使うべきではありません。

[aaayyy]

ちょっとわかりません、、
毎回配列を作るということでしょうか？

[aaayyy]

stateにはこだわっていません！！

[maisumakun]

> 毎回配列を作るということでしょうか？

それでも構いませんし、useMemoを使えば元の配列が変更されない限り、配列の生成が1度で済みます。

[aaayyy]

うーーん。isDate()はいらないということでしょうか？

[aaayyy]

まだ、どこを直したらいいのかが全然わかっていないです、、

[maisumakun]

まずはいったんJSXのことを忘れて、「同じ日付があったら空文字列にする」配列を作るコードを書いてみてはいかがでしょうか？

[aaayyy]

{dates.map((date, i) => (
<>{isShowDate(date) ? <div key={i}>{addDate(date)}</div> : <div></div>}</>
))}

[aaayyy]

書きました

[maisumakun]

えっと、断固としてJSXで書き続けているのはどういうことでしょうか？

[aaayyy]

どうやってjsx以外で書いて表示できるのでしょうか？

[aaayyy]

jsx以外で書いて空文字を表示できる方法がわかりません

[maisumakun]

「JSXと関係なく配列を作る」→「それをJSXで表示する」、という2段階で行うことを提案しています。

[maisumakun]

> jsx以外で書いて空文字を表示できる方法がわかりません

変数に空文字列を入れておけば、JSX内で変数展開すると空になります。

[aaayyy]

{dates.map((date, i) => (
の配列を変えるということですか？

[aaayyy]

この配列の中には後からいろいろ付け加えたいのでdatesのmap　で回したいです

[maisumakun]

そうですね、そこに「出力したい形の配列」をセットします。

[aaayyy]

そこにとはどこのことですか？

[maisumakun]

> この配列の中には後からいろいろ付け加えたいのでdatesのmap　で回したいです

頑張ってください。ことごとく後出しで条件を出されては、これ以上ついていく気力がなくなりました。

[aaayyy]

結局何もわからなかったですが、一応ありがとうございました

[maisumakun]

> 結局何もわからなかったですが

無限ループに陥る理由も理解できなかった、ということですか？

[kyoya0819]

> 結局何もわからなかったですが、一応ありがとうございました

（回答依頼をいただきましたが、）とりあえず質問本文に要件を全て書いてください。後出しされるのは、回答者にとっても負担です。コメントで後出しされるくらいなら、質問文を編集して「未掲載の情報があったので質問文を編集しました」と言った方が『まし』です。

Answer 2

配列の中身をmapで回してisShowDataでstateで管理しているmessageDataと比較して同じものがあれば表示せず、違う値なら表示したいです。

この内容通りだとすれば、最後のreturnの中身は以下ではないでしょうか。

  return (
    <>
      {dates.map((date, i) => (
        <>{isShowDate(date) && <div key={i}>{date}</div>}</>
      ))}
    </>
  );

AddDate()は多分、ボタンを押したときか何かに呼ばれるんですよね。

Comments

[maisumakun]

> AddDate()は多分、ボタンを押したときか何かに呼ばれるんですよね。

どうやら、そういう意図ではないようです（自分の回答についたコメントを参照）。