javascript - 正确显示选择的值

Question

我有一个应用程序，我使用 select 标签在表中添加值。通过此选择，我可以仅选择一个值并将其添加到表中。select输入的部分代码:

const searchPlayer = selectedItems => {
    selectedItems = selectedItems.map(name => name.toLowerCase());
    let arrayOfMatchedObjects = team.filter(object => {
      return selectedItems.some(selectedItem =>
        JSON.stringify(object)
          .toString()
          .toLowerCase()
          .includes(selectedItem)
      );
    });
    return arrayOfMatchedObjects;
  };
  
 

问题是它无法正常工作，因为当我选择一个名称但不保存它时，之后我改变主意并选择另一个名称，表中将添加两个名称，但是我不明白为什么，因为这样我只需单击按钮一次即可添加 2 个名称。谁知道如何解决这个问题？链接到应用程序:https://codesandbox.io/s/serene-hamilton-go4m3

Answer 1

在当前代码中，您在 useEffect() 中连接选择，这会导致多选项被传递到表中。

删除 concate 方法即可满足您的需求。

<小时/>

更新

替换这个

const addPlayer = () => {
  setnewPlayer(searchPlayer(savedPlayer));
};

useEffect(() => {
  setSavedPlayer(
    Array.from(new Set(savedPlayer.concat(selectedItems)).values())
  );
}, [selectedItems]);

至

const addPlayer = () => {
  const data = Array.from(new Set(savedPlayer.concat(selectedItems)).values());
  setnewPlayer(searchPlayer(data));
  setSavedPlayer(data);
};