stateで管理する配列[]の値入力と、表示の不具合を解決したい

Question

前提・実現したいこと

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

下記の３つの要素が1組となるコンポーネントがあります。

各コンポーネントは配列で管理され、それぞれのTextInputで入力された値は、コンポーネントと同じindexで管理する配列で、追加、削除の管理がされます。

• TextInput
• Button(追加)
• Button(削除)

追加ボタンを押すと、コンポーネントが追加され、削除を押すと削除されます。

発生している問題・エラーメッセージ

一度TextInputに入力し、追加をすると、入力を終えた値の再編集ができずに困っています。

例えば、最初のコンポーネント（配列0番目）の入力欄に「000」と入力し、追加を押すと、入力されたとおりの値が表示されコンポーネントも追加されます。

しかし、この状態で最初のコンポーネント（配列0番目）を編集しようとすると、入力に以下のような不具合が起こります。

入力欄の表示が000から変わらない（削除できずに、新しい数字の表示もできない）

数字を入力するonChangeの際、表示の元となる配列の値をconsol.log()（下記コードの①の箇所）で確認するために、

1→2→3
と入力するとコンソールでは、

Array [
  "0001",
]
Array [
  "0002",
]
Array [
  "0003",
]

というように、元々の000に入力した数字の末尾に、1文字追加され、4文字で更新されるようになります。

このような問題を解決し、値の再編集をするにはどのような対策行えばよいか試していますが、解決できません。

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

該当のソースコード

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

function Item({
  setNumber,
  number,
  handleInput,
  handleAdd,
  handleDelete,
  index,
}) {
  return (
    <View style={styles.list}>
      <Text>{index}</Text>
      <TextInput
        style={{ borderWidth: 1 }}
        value={number[index]} //②試したこと
        onChange={(e) => {
          handleInput(index, e.nativeEvent.text);
          console.log(number); //①値のコンソール確認
        }}
      ></TextInput>
      <Button
        title="追加"
        onPress={() => {
          handleAdd();
        }}
      />
      <Button
        title="削除"
        onPress={() => {
          handleDelete(index);
        }}
      />
    </View>
  );
}

export default function TestStateArray() {
  const [count, setCount] = useState(1);
  const [number, setNumber] = useState([]);

  function handleAdd() {
    setCount((v) => v + 1);
  }

  function handleDelete(index) {
    setCount((v) => v - 1);
    setNumber((v) => {
      v.splice(index, 1);
      return v;
    });
  }

  function handleInput(index, text) {
    setNumber((v) => {
      v[index] = text;
      return v;
    });
  }

  return (
    <View>
      {Array.from({ length: count }, (_, i) => (
        <Item
          setNumber={setNumber}
          number={number}
          handleInput={handleInput}
          handleAdd={handleAdd}
          handleDelete={handleDelete}
          key={i + "-" + number}
          index={i}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  list: {
    margin: 10,
    padding: 10,
    backgroundColor: "#ddd",
  },
});

試したこと

上記コード②のコメント部分である、value={number[index]}を削除すると、

追加ボタンを押し、コンポーネントが増えた時点で、入力欄の値が消えてしまします（再編集できない）ので、対策にはなりませんでした。

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

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

  function handleInput(index, text) {
    setNumber((v) => {
      v[index] = text;
      return v;
    });
  }

配列を破壊的に変更すると、「変更された」と認識されない場合があるので、React関係では基本的に避けるべきパターンです。いったんコピーしてから変更しましょう。

  function handleInput(index, text) {
    setNumber((v) => {
      const ret = v.slice();
      ret[index] = text;
      return ret;
    });
  }

Comments

[maisumakun]

同様に、破壊的にspliceしているhandleDeleteも対応が必要です。

[tomaa]

ご回答いただきありがとうございます。
紹介していただいた方法を試しました。
再編集はできるよになりましたが、入力する時に不具合が出るようになりました。
1文字づつしか入力できず、入力毎にカーソルを当て直す必要があります。
こちらの対策について、調べてみたいと思います。