正确显示选择中的值

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);};