増減する複数のinputの値からオブジェクトの配列を生成したいです。

Question

質問解決後の追記

suwmn50799さんのご回答にベストアンサーを付けていますが、実質的ベストアンサーはmaisumakunさんのご回答のコメント欄にある、suwmn50799さんの実装例です。
ただし、maisumakunさんにベストアンサーを付けると、suwmn50799さんのteratailのスコアに影響が無いため、suwmn50799さんのご回答にベストアンサーを付けております。

前提

CodeSandBox
上記はデモです。

ユーザーの情報を入力するコンポーネントがあります。
入力欄は最大10まで増やせます。
また、任意の入力欄を削除できます。

実現したいこと

Submitボタンを押した際、No.ごとのname、age、addressそれぞれの値でオブジェクトを生成し、生成したオブジェクトを配列に格納したいです。

例えば、下記のようなオブジェクトの配列を作成したいです。

[
  {name: "Suzuki", age: 20, address: "Tokyo"},
  {name: "Sato", age: 30, address: "Osaka"},
  {name: "Tanaka", age: 40, address: "Fukuoka"}
]

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

No.ごとの各inputの値を取得できていません。

該当のソースコード

import { useState, useRef } from "react";

const getUniqueStr = () => {
  return (
    new Date().getTime().toString(16) +
    Math.floor(1000 * Math.random()).toString(16)
  );
};

export default function App() {
  const defaultUser = () => {
    return {
      id: getUniqueStr(),
      name: "",
      age: 0,
      address: ""
    };
  };
  const [users, setUsers] = useState([defaultUser()]);

  const addItem = (e) => {
    e.preventDefault();
    if (users.length < 10) setUsers([...users, defaultUser()]);
  };

  const deleteItem = (e) => {
    e.preventDefault();
    const itemId = e.currentTarget.id;
    const newItems = users.filter((user) => user.id !== itemId);
    setUsers(newItems);
  };

  const list = users.map((user, index) => (
    <tr key={user.id} id={`user${index}`}>
      <td>{index + 1}</td>
      <td>
        <input type="text" name="name" />
      </td>
      <td>
        <input type="number" name="age" />
      </td>
      <td>
        <input type="text" name="address" />
      </td>
      <td>
        <button onClick={deleteItem} id={user.id}>
          Delete
        </button>
      </td>
    </tr>
  ));

  const formRef = useRef(null);
  const submitData = (e) => {
    e.preventDefault();
    const formCurrent = formRef.current;
    console.log(formCurrent);
  };

  return (
    <form onSubmit={submitData} ref={formRef}>
      <button onClick={addItem}>Add</button>
      <button type="submit">Submit</button>
      <table>
        <thead>
          <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Age</th>
            <th>Address</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>{list}</tbody>
      </table>
    </form>
  );
}

試したこと

上記コードに含めていますが、useRefを使ってtrごとのDOMを取得して、tr以下のinputの値を取得する、という処理を試みました。

const submitData = (e) => {
  e.preventDefault();
  const formCurrent = formRef.current;
  const userData = formCurrent.user0;
  console.log(userData);
  ...
};

userDataはundefindでした。
useRefでname属性なら取得できることは確認できたのですが、trにname属性を付けるとlintに怒られました。

---

次に下記のように、input要素のname属性から値を取得してみました。

const submitData = (e) => {
  e.preventDefault();
  const formCurrent = formRef.current;
  const inputNames = Array.from(formCurrent.name);
  const names = inputNames.map(elm => elm.value);
  console.log(names);
  ...
};

これで下記のようにNo.ごとではなくnameごとに値を取得することができました。

[
  {"Suzuki"},
  {"Sato"},
  {"Tanaka"},
]

同じ要領でageとaddressも配列を作れそうではあります。

しかし、複数の配列からオブジェクトを生成して配列に格納する方法が分かりませんでした。
「javascript 配列 統合」「javascript 配列 合成」などで検索すると、単一の配列にする方法なら分かりました。
Array.prototype.concat() - JavaScript | MDN

---

また、各inputの値をstateで管理すれば、値を取得できそうではありますが、パフォーマンス的によくないと考えられるため、stateで値を取得する方法はできるだけ避けたいです。

Answer 1

(都合により削除)

Comments

[退会済みユーザー]

(都合により削除)

[evgenia]

私の実現したいことができているコードを確認できました。ありがとうございます。とても簡略的なコードでした。
jQueryをほぼ触ったことない身からすると、なんでもかんでもstateを使ってしまっているため、今回の要件のようにリアルタイムでバリデーションを必要としない場合は、stateを利用せずに実装する方がパフォーマンス的にもコード量的にも無駄が少ないと考えていました。
loadshは調べてみたら脱loadshを目指す記事が2、3見つかったので、maisumakunさんからstateを利用した実装方法を24時間以内にご回答いただけなかった場合は、suwmn50799さんのご回答をベストアンサーにいたします。

Answer 2

また、各inputの値をstateで管理すれば、値を取得できそうではありますが、パフォーマンス的によくないと考えられるため、stateで値を取得する方法はできるだけ避けたいです。

いえ、それがReact本来のやり方です。「パフォーマンス的によくない」というのは、どこからの情報でしょうか？

Comments

[evgenia]

どこからの情報ではありません。質問文にある通り私の考えです。お手数ですが、仰せの「React本来のやり方」を用いたコードを「回答」にご教示いただけますでしょうか。stateで管理する方法だとonChangeのたびにsetStateをする方法しか思いつかず、文字入力の度にinput要素をレンダリングするのは無駄が多くなり、パフォーマンス的にによくなさそうだなと思った次第です。

[maisumakun]

> stateで管理する方法だとonChangeのたびにsetStateをする方法しか思いつかず

そのとおりで問題ありません。

> 文字入力の度にinput要素をレンダリングするのは無駄が多くなり、パフォーマンス的にによくなさそうだな

それで十分実用になるからReactが成立しています。

[evgenia]

onChangeでsetStateでも十分実用になることをご教示いただきありがとうございます。
そうしましたら、レンダリング回数が増えることはひとまず置いておき、stateを利用する方法をとろうと思います。
つきましては、度々のお願いで恐れ入りますが、stateを利用した実装方法をご教示いただけますでしょうか。

[退会済みユーザー]

横からえらいすんません

> 仰せの「React本来のやり方」を用いたコード

やねんけど、なんやろ、ざっくりこんなんになる思うで？

https://codesandbox.io/s/amazing-curie-jlst7

[evgenia]

> suwmn50799さん
state利用版のデモもご用意いただきありがとうございます。
state利用でも十分シンプルなコードになっているので、state利用版コードを採用します。
重ねてありがとうございました。