stateで管理している配列要素の追加と削除の方法を知りたい

Question

前提・実現したいこと

React Nativeを利用してアプリの開発をしています。

Stateで配列([])を管理する際の、要素の追加と削除の方法を知りたいです。

const [name, setName] = useState([]);
と宣言した場合、
setNameを使って、追加、削除したほうが良いと思うのですが、どのようにすればよいかわかりません。

例えば、
const [name, setName] = useState([""]);
というように初期値を設定してから、
setName(name.push(""));
と行うと、配列の要素が増えずになぜか「２」が値として入ります。

方法をご存知の方おりましたら、ご教授いただけないでしょうか？

今質問の背景

もともと、連想配列でテキストの入力を含むコンポーネントの追加、削除を行う予定でした。

しかし、下記の画像のような削除の仕方をしたい時に、通常の配列（[]）を利用したほうが、コードを作りやすいと思い現在改良をしています。

該当のソースコード

連想配列を利用した場合のコード

import React, { useState } from "react";
import { View, Button, Text, TextInput } from "react-native";

function Item({ setText, handleAdd, i }) {
  return (
    <View>
      <TextInput
        style={{ borderWidth: 1 }}
        onChange={(e) => {
          setText(i, e.nativeEvent.text);
        }}
      ></TextInput>
      <Button
        title="追加"
        onPress={() => {
          handleAdd();
        }}
      ></Button>
    </View>
  );
}

export default function TestStateArray() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState({});

  function handleAdd() {
    setCount((v) => v + 1);
  }
  return (
    <View>
      <Text>確認{JSON.stringify(name)}</Text>
      {Array.from({ length: count }, (_, i) => (
        <Item
          handleAdd={handleAdd}
          setText={(i, text) => setName((prev) => ({ ...prev, [i]: text }))}
          key={i}
          i={i}
        />
      ))}
    </View>
  );
}

通常の配列でのコード

import React, { useState, useEffect } from "react";
import { View, Text, Button, TextInput } from "react-native";

function Item({ setName, handleAdd, handleDelete, index }) {
  return (
    <View>
      <TextInput
        style={{ borderWidth: 1 }}
        onChange={(e) => {
          setName(e.nativeEvent.text);
        }}
      ></TextInput>
      <Button
        title="追加"
        onPress={() => {
          handleAdd();
        }}
      />
      <Button
        title="削除"
        onPress={() => {
          handleDelete(index);
        }}
      />
    </View>
  );
}

export default function TestStateArray() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState([""]);

  function handleAdd() {
    setCount((v) => v + 1);
    setName(name.push(""));
  }
  function handleDelete(index) {
    setCount((v) => v - 1);
    setName(name.splice(index, 1));
  }
  console.log(name);
  return (
    <View>
      <Text>確認{JSON.stringify(name)}</Text>

      {Array.from({ length: count }, (_, i) => (
        <Item
          name={name}
          setName={setName}
          handleAdd={handleAdd}
          handleDelete={handleDelete}
          key={i}
          index={i}
        />
      ))}
    </View>
  );
}

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

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

setName(name.push(""));

と行うと、配列の要素が増えずになぜか「２」が値として入ります。

これはsetNameに渡しているのがname.push("")の戻り値だからです。
Array.prototype.push()は下記のリファレンスにあるようにpush後のlengthが戻り値になります。

• Array.prototype.push()

stateで管理している配列を扱う場合は、単純に更新したい内容の配列を渡すだけです(先の例ではname.push("")した後の配列)。
ただ、state中の配列を扱うには、stateから取得したばかりの配列にsplice()やpush()等の破壊的な変更を伴うメソッドを使ってはいけません。
これはReactはstateの変更をObject.is()で判定していることに起因します。
詳しくは、下記記事で解説がありました。

• React の state hook で array を更新しても再描画がされない問題

具体的にどうすればいいかというと、新しい配列に入れ直してからsetNameを実行する必要があります。
方法は色々ありますが、スプレッド演算子...あたりを使うのがベターかと思います。

const [name, setName] = useState([]);

// 下記はNG
// name.push("hoge");
// setName(name);

// 下記はOK
const newName = [...name, "hoge"];
setName(newName);

Comments

[tomaa]

ご回答いただきありがとうございます。
詳しく解説していただき、大変わかりやすいです。
具体的な対策も示していただきありがとうございます。
非常に参考になりました！！