0

ユーザー側で項目を増減できるテキストフォーム入りリストを作成しています。
下記はデモです。
Reactを使用しています。
CodeSandBox
リスト直下のAdd itemを押すことで、リスト追加できます。
リストの右端の×を押すことで、リストを削除できます。

現状リストの増減はできるようになったのですが、テキストフォームに値を入力した状態で入力したリストを削除すると、リストは削除できるものの、フォームの値が削除されない状態です。
gif

リストの左端Numberの値は識別子ではなくリストの数を表現したいのでNumberの値は変わらなくてよいのですが、フォームの値は削除したいです。


下記がコードです。

export default function App() {
 const defaultItem = { a: "", b: "", c: "" };
  const [items, setItems] = useState([defaultItem]);
  const [length, setLength] = useState(1);

  const addItem = () => {
    if (length > 4) return;
    setItems((items) => [...items, defaultItem]);
    setLength((length) => length + 1);
  };
  const deleteItem = ({ target: { name } }) => {
    const newItemArray = [...items];
    newItemArray.splice(Number(name), 1);
    setItems(newItemArray);
    setLength((length) => length - 1);
  };

  const itemList = items.map((item, index) => {
    return (
      <tr key={index}>
        <td>{index + 1}</td>
        <td>
          <input type="text" name="a" defaultValue={item.a} />
        </td>
        <td>
          <input type="text" name="a" defaultValue={item.b} />
        </td>
        <td>
          <input type="text" name="a" defaultValue={item.c} />
        </td>
        <td>
          <button onClick={deleteItem} name={index.toString()}>
            ×
          </button>
        </td>
      </tr>
    );
  });

  const submitList = (e) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={submitList}>
      <table>
        <thead>
          <tr>
            <th>Number</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>{itemList}</tbody>
      </table>
      <button onClick={addItem} disabled={length > 4 ? true : false}>
        Add item
      </button>
      <hr />
      <input type="submit" value="Submit" />
    </form>
  );
}

リストの削除は下記の関数です。

const deleteItem = ({ target: { name } }) => {
  const newItemArray = [...items];
  newItemArray.splice(Number(name), 1);
  setItems(newItemArray);
  setLength((length) => length - 1);
};

リスト削除ボタンのname属性にリストのindex番号を設定して、削除ボタン押下時にname属性からリストの番号を取得し、該当する番号のリストを削除する、という処理を狙っています。

1 件の回答 1

1

リストと key – React
https://ja.reactjs.org/docs/lists-and-keys.html#keys

要素の並び順が変更される可能性がある場合、インデックスを key として使用することはお勧めしません。パフォーマンスに悪い影響を与え、コンポーネントの状態に問題を起こす可能性があります。Robin Pokorny による、key としてインデックスを用いる際の悪影響についての詳しい解説をご覧ください。より詳しく学びたい場合は、key が何故必要なのかについての詳しい解説を参照してください。

Index as a key is an anti-pattern (React) | by Robin Pokorny | Medium
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

Many people asked if they always, always have to generate ids. Others have suggested use cases when using the index as a key seems justifiable.

It is true that sometimes generating new ids is redundant and may be avoided. For example translation of license terms or list of contributors.

To help you decide, I put together three conditions which these examples have in common:

  1. the list and items are static–they are not computed and do not change;
  2. the items in the list have no ids;
  3. the list is never reordered or filtered.

今回のコード例のリストは the list and items are static–they are not computed and do not change ではないので、 item それぞれに固有の識別子が必要です。

実際のアプリケーションコードでそれぞれの item に使用できそうな識別子があれば、それを利用してください。

実際のコードでも識別子がない場合、nanoidなどのライブラリを使って識別子の生成を検討してください。

以下のコードは識別子に new Date().getTime() を使用した例になります。
(回答の為のサンプルコードとして使用しています。私が new Date().getTime() の使用を推奨しているわけではないことに注意してください)

function App() {
  const defaultItem = () => ({ id: new Date().getTime(), a: "", b: "", c: "" });
  const [items, setItems] = React.useState([defaultItem()]);
  const [length, setLength] = React.useState(1);

  const addItem = () => {
    if (length > 4) return;
    setItems((items) => [...items, defaultItem()]);
    setLength((length) => length + 1);
  };
  const deleteItem = ({ target: { name } }) => {
    const newItemArray = [...items];
    newItemArray.splice(Number(name), 1);
    setItems(newItemArray);
    setLength((length) => length - 1);
  };

  const itemList = items.map((item, index) => {
    return (
      <tr key={item.id}>
        <td>{index + 1}</td>
        <td>
          <input type="text" name="a" defaultValue={item.a} />
        </td>
        <td>
          <input type="text" name="a" defaultValue={item.b} />
        </td>
        <td>
          <input type="text" name="a" defaultValue={item.c} />
        </td>
        <td>
          <button onClick={deleteItem} name={index.toString()}>
            ×
          </button>
        </td>
      </tr>
    );
  });

  const submitList = (e) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={submitList}>
      <table>
        <thead>
          <tr>
            <th>Number</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>{itemList}</tbody>
      </table>
      <button onClick={addItem} disabled={length > 4 ? true : false}>
        Add item
      </button>
      <hr />
      <input type="submit" value="Submit" />
    </form>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="root"></div>

1
  • ありがとうございました。希望通りの挙動になりました。
    – Tiamante
    Commented 2021年5月3日 11:26

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。