Reactの行の追加、削除の際に削除ボタンで指定した行が消えない

Question

以下のような画面で "+" ボタンを押すと行が追加され
"-" ボタンを押すとその行が削除されるようなFormを作成中です。

見よう見まねで以下のサイトを参考に作成していたのですが
https://codesandbox.io/s/6j1760jkjk

"-"を押しても1行下から削除されるだけで
"-"を押した行が削除できません。。。

また、何度か追加・削除を繰り返していると
1個の"-"ボタンで複数削除されてしまいます。
例えば、test16 まで追加、test2,3 を削除して再度test710などを追加して
test7を消すとtest8以降が消える、など

どのあたりに上記事象がありそうか
ご指摘いただければ幸いです。。。

よろしくお願いいたします。

• ArraySample.js

import React, {useState} from 'react';
import { useForm } from "react-hook-form";

function ArraySample() {
  const {register, handleSubmit} = useForm();

  const [indexes, setIndexes] = React.useState([]);
  const [counter, setCounter] = React.useState(0);

  const addAddress = () => {
    setIndexes(prevIndexes => [...prevIndexes, counter]);
    setCounter(prevCounter => prevCounter + 1);
    console.log(counter);
  };

  const removeAddress = index => () => {
    setIndexes(prevIndexes => [...prevIndexes.filter(item => item !== index)]);
    setCounter(prevCounter => prevCounter - 1);
    console.log(counter, indexes)
  };

  return (
    <form onSubmit={handleSubmit()}>

      <h3>Address</h3>

      <button type="button" onClick={addAddress}>
        +
      </button>
      {indexes.map(index => {
        return (
          <div>
            <label>Address</label>
              <input
                type="text"
                name={`address.${index}`}
                ref={register}
              />
            <button type="button" onClick={removeAddress(index)}>
              -
            </button>
          </div>
        )
      })}
    </form>
  )
}

export default ArraySample;

Answer 1

直接の原因になっているかわかりませんが、問題がありそうな箇所について話しますね。

removeAddressでcounterを単純に現在より1引いたものをセットしてますが、これだと重複するものが出てしまいます。例えば、0と1の要素があったときにcounterは2です。0の要素を削除するとcounterは2から1引かれて1になります。その後addAddressをすると1(counter)の要素が追加されて、1と1の重複した要素が2つに存在することになります。removeAddresはindexが特定の数字のものを削除するようになってますから、どちらかを削除するとindexが同じもう一つも含め、つまり両方が削除されてしまいますね。

それとReactの公式ドキュメントにも書かれていますがmap処理でjsxを生成する際は、Reactが配列内の要素を識別しやすくするために基本的にkey属性を指定したほうが良いです。
https://ja.reactjs.org/docs/lists-and-keys.html

また、removeAddress自身についても、高階関数(関数を返す関数)になっていますが、なぜそうしているのか気になるところです。

参考にされている元コードですが、あまりいいコードには見えないので、あまり真に受けないほうが良いかもしれません。

Comments

[07290729]

なるほど、、、確かにおっしゃる通りですね。
そうなるとadd, removeどちらも書き換えたほうがいいのと
もっと単純にlist や indexだけを操作したほうがよさそうですね・・・　（＞＜

アドバイスありがとうございます！