时间戳

首页 > 解决方案 > 从表中删除值

reactjs - 从表中删除值

问题描述

我的应用程序有一个包含不同数据的选择和一个我从选择中添加数据的表。这里出现了一个问题：在表格中添加所有选择的数据并从表格中删除数据后，当我从输入中仅选择一个值并单击保存时，表格中的最后一个值再次出现，即使我只选择了一个。

这样我删除：

  const handleDelete = name => {
    setData(data.filter(item => item.name !== name));
  };

如何解决这个问题？链接到我的应用程序：https ://codesandbox.io/s/serene-hamilton-go4m3

标签： reactjs

解决方案

首先，我发现您没有在子句柄删除中更新父状态。您使用 newPlayer 作为 Table 的状态，但不要更新它。现在看起来像这样：

/* index.js
add new function handleDelete and change table properties*/

const handleDelete = name => {
  const updSaved = savedPlayer.filter(item => item !== name);
  setnewPlayer(searchPlayer(updSaved));
  setSavedPlayer(updSaved);
};
........

<MyTable newPlayer={newPlayer} deletePlayer={handleDelete} />
.......

/* MyTable.js
edit function handleDelete and change table class*/

const MyTable = ({ newPlayer, deletePlayer }) => {

.....

const handleDelete = name => {
  deletePlayer(name);
};

现在它工作得很好。而且，我提到了您的选择输入的问题。它无法正常工作，请检查您的过滤器逻辑以获取选项。

祝你好运！

UPD

靠近这条线：

const finalListOfParticipants =
  teamPlayer === undefined ? newPlayer : newPlayer.concat(teamPlayer);

有两个不同的对象。您的 newPlayer 来自您的选择菜单，newPlayer.concat(teamPlayer); 来自预加载的数据。你有一键删除。您要清除 onClick 哪个对象？我的解决方案仅使用选择菜单和 newPlayer 列表。如果要同时使用这两个列表，则需要将所有逻辑转移到父组件SelectWithHiddenSelectedOptions。MyTable 是一个子组件。我无法想象我该如何解释清楚。

推荐阅读