reactjs - 動的に追加されたテーブル行を削除する - 反応js

Question

テーブル行をテーブルに動的に追加しています。UI での表示は次のとおりです。

新しい行を作成するために使用しているロジックは次のとおりです。

状態変数がありますthis.state = ({rows: []})

「挿入」ボタンをクリックして、私はやっています：

addNewRow = () => {
        this.setState({rows: this.state.rows.concat([{}])});
    }

私render()は以下のコードを持っています：

const rows = this.state.rows.map((item, id) => {
            return(
                <tr key={id}>
                    <td>Something</td>
                    <td>Something</td>
                    <td>Something</td>
                    <td>Something</td>
                    <td><Button onClick={(event) => this.removeRow(event, id)}>Delete</Button></td>
                </tr>
            );
        });

そして、明らかに、私の最終的なテーブル コードは次のようになります。

<Table borderless>
    <tbody>
       {rows}
    </tbody>
<tfoot>
    <tr>
       <td>
        <Button onClick={() => {this.addNewRow()}} size="sm" className="float-left">insert</Button>
       </td>
    </tr>
</tfoot>
</Table>

これが私のremoveRow機能です：

removeRow = (event, id) => {
        event.preventDefault();
        var index = this.state.rows.indexOf(id);
        this.state.rows.splice(index, 1);
        this.setState({rows: this.state.rows});
    }

コード全体が機能します。変数名を変更し、それらから不要なコードを削除しましたが、これは私がどのように設計したかを示すためのものです。

私の問題は、「削除」ボタンをクリックすると、クリックしたアイテム行ではなく、行の最後のアイテムが常に削除されることです。これを修正する方法は？

私は同じことについてグーグルで検索しましたが、いくつかの例が見つかりました.

この問題を解決するために何をする必要があるかアドバイスしてください。