reactjs 如何删除表中的特定行？答案

【问题标题】：How do I delete a specific row in a table in reactjs?reactjs 如何删除表中的特定行？
【发布时间】：2021-11-27 21:21:53
【问题描述】：

我的最后一个问题是关于删除已解决的表中的所有行。我现在遇到的问题是我将如何删除一个 specific 行，该行上有一个删除按钮。我想要实现的是，当单击按钮时，删除按钮所在的行。

我现在遇到的问题是，当我按下行上的删除按钮时，它会删除表上的第一行，这不是我想要的。

const [shop, setShop] = useState([]);
....
function singleDelete(i){
        var newArr = [...shop];
        newArr.splice(i, 1);
        setShop(newArr);
        setCount(count -1);
  }

【问题讨论】：

不清楚第一行是否存在删除按钮。您不需要维护单独的计数状态变量。

标签： javascript reactjs reactstrap

【解决方案1】：

你可以使用Array.prototype.filter:

setShop(shop.filter((_, index) => index !== i));

另外，不要维护单独的count 变量，因为它是多余的。使用shop.length 可以轻松检索计数。

【讨论】：

所以我更改了代码以使用 findIndex 和 splice 效果稍好但仍然没有产生我想要的结果（它现在删除了它前面的行）。代码设置在这里（codepen.io/Guy-Fawkes-cc/pen/JjyPGgZ?editors=1010）。我也尝试在我当前的代码中使用 .filter 方法，但什么也没发生（我一定是实现错了吗？）所以我刚刚在此处放置了一个片段（codepen.io/Guy-Fawkes-cc/pen/QWMLNwE?editors=0110），让您更深入地了解问题所在。
您的 sn-p 似乎无法正常工作。您可以将它作为一个有效的 sn-p 发布在 StackOverflow 问题中：meta.stackoverflow.com/questions/338537/… 我建议您发布一个新问题，因为这个问题已经得到解答。

【解决方案2】：

使用过滤器：setShop(shop.filter((_, shopIndex) = shopIndex !== i));

【讨论】：

【解决方案3】：

在这里创建了工作示例，您可以使用此沙箱链接：https://codepen.io/naveenkumarpg/pen/GRvKpxM

作为参考，您可以获取行 ID 并删除该项目。

remove = (rowId) => {
    // Array.prototype.filter returns new array
    // so we aren't mutating state here
    const arrayCopy = this.state.data.filter((row) => row.id !== rowId);
    this.setState({data: arrayCopy});
};

【讨论】：