正确显示选择中的值

Question

我有一个应用程序，我使用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

从您当前的代码中，您可以concate在 中进行选择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);

};