stateの配列の要素数が増えた時に再レンダーさせる方法

Question

前提・実現したいこと

react nativeを利用してアプリ開発をしています。

コンポーネントを配列で管理し、コンポーネントの数（配列の要素数）が増えた時に、画面を再レンダーさせて、配列の数に応じた表示をさせたいです。

下記のコードをベースにどのように実装すれば良いかご存知の方おりましたら、ご教授いただけないでしょうか？

該当のソースコード

①コンソールチェックは、画面更新時のみ表示され、追加ボタンを押した時は表示されません。

import React, { useState, useEffect } from "react";
import { View, StyleSheet, Text, TouchableOpacity } from "react-native";

export default function TestListItem() {
  const [arrayList, setArrayList] = useState([]);

  useEffect(() => {
    console.log("checked"); //①コンソールチェック
  }, [arrayList.length]);

  arrayList.push(renderList());

  function handleMakeNew() {
    arrayList.push(renderList());
  }

  function renderList() {
    return (
      <View style={styles.container}>
        <View style={styles.list}>
          <TouchableOpacity
            onPress={() => {
              handleMakeNew();
            }}
            style={styles.buttonAdd}
          >
            <Text>追加する</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  return arrayList;
}

const styles = StyleSheet.create({
  container: {
    padding: 5,
    justifyContent: "center",
    backgroundColor: "snow",
  },

  list: {
    width: "100%",
    backgroundColor: "#ddd",
    marginBottom: 5,
    borderRadius: 10,
    padding: 10,
  },

  buttonAdd: {
    backgroundColor: "orange",
    width: 80,
    height: 40,
    borderRadius: 5,
    margin: 3,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
  },
});

試したこと

②の場所に追加ボタンを押した時に、forceUpdate();で更新させようとしてもエラーとなります。

import React, { useState, useEffect } from "react";
import { View, StyleSheet, Text, TouchableOpacity } from "react-native";

export default function TestListItem() {
  const [arrayList, setArrayList] = useState([]);

  useEffect(() => {
    console.log("checked");
  }, [arrayList.length]);

  arrayList.push(renderList());

  function handleMakeNew() {
    arrayList.push(renderList());
    forceUpdate(); //②forceUpdate(); を追加
  }

  function renderList() {
    return (
      <View style={styles.container}>
        <View style={styles.list}>
          <TouchableOpacity
            onPress={() => {
              handleMakeNew();
            }}
            style={styles.buttonAdd}
          >
            <Text>追加する</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  return arrayList;
}

const styles = StyleSheet.create({
  container: {
    padding: 5,
    justifyContent: "center",
    backgroundColor: "snow",
  },

  list: {
    width: "100%",
    backgroundColor: "#ddd",
    marginBottom: 5,
    borderRadius: 10,
    padding: 10,
  },

  buttonAdd: {
    backgroundColor: "orange",
    width: 80,
    height: 40,
    borderRadius: 5,
    margin: 3,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
  },
});

エラーメッセージは以下の内容です。

ReferenceError: Can't find variable: forceUpdate

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Comments

[wilf]

エラーが出る場合は、エラーの内容を記載すると解決に近くなるので、記載するようにしましょう。

[tomaa]

ありがとうございます。エラー内容追加し編集しました。

Answer 1

state に対して arrayList.push(renderList()) するのと、
ReactNode を state 管理するのはよくありません。

↓count にした例です(React Native じゃないので注意してください。)

export default function TestListItem() {
  const [count, setCount] = useState(1)

  useEffect(() => {
    console.log('checked') //①コンソールチェック
  }, [count])

  function handleMakeNew() {
    setCount(v => v + 1)
    console.log(count)
  }

  function renderList() {
    return (
      <div>
        hoge
        <div>
          <button
            onClick={() => {
              handleMakeNew()
              console.log(count)
            }}
          >
            追加する
          </button>
        </div>
      </div>
    )
  }

  return [...Array(count).keys()].map(i => <renderList key={i} />)
}

Comments

[tomaa]

ご回答いただきありがとうございます。
おかげさまで、希望の動作となりました。
コードの書き方は理解できない所が多いですが、こらから知識を深めたいと思います。

[tomaa]

先日はご回答いただきありがとうございます。
可能であれば、アドバイスをいただきたいのですが、この質問の内容はお陰様で解決できたのですが、`<renderList key={i} />`のコンポーネントにTextInputのコンポーネントを追加すると、うまく入力ができなくなってしまいます。
1文字入力する度に、カーソルを当て直さなければならなく、連続して文字を入力できない状況です。
別の質問として載せていますので、もし可能であればご覧いただけると幸いです。
https://teratail.com/questions/282808