使用通用函数来处理用户在 REACT 中单击时多个基于数组的相似状态的变化

Question

我在 react 中创建了一个传输列表，其中有两个用于在彼此之间传输名称的框。（左列表到右列表）。所以我编写了一个函数handleAllRight，它将左侧列表中的所有元素传输到第二个列表，该列表基本上是数组，并使左侧列表为空，用于handleAllRight 按钮的目的。现在我又介绍了一个leftList2 和rightList2，它们也有handleAllRight 功能。

但我不会为这两个列表编写一个通用的 handleAllRight 函数。handleAllRight 函数中唯一不同的是列表的编号。这是我使用 if 循环的 handleAllRight 函数。但是，如果其中传递了任何列表，如何动态创建它。它应该负责检查用户单击的 id 的传输。

const handleAllRight = listNumber => {

if (listNumber === 1) {

  setRightlist1(leftlist1);

  setleftlist1([]);

}

if(listNumber === 2){

    setRightlist2(leftlist2)

    setleftlist2([]);

}

  };

但我不想使用这个条件，因为可能有很多列表，所以它会增加代码行的大小。我尝试的另一件事是使用 eval 函数。它适用于任意数量的传输列表但我也不想使用 eval，因为使用它不是一个好习惯。例如，我像这样使用 eval

    const handleAllRight = listNumber => {

        eval(`setRightJobSeq${listNumber}(leftJobSeq${listNumber})`)

        eval(`setleftJobSeq${listNumber}([])`);

}

这是 codeSandbox 链接。https://codesandbox.io/s/trusting-water-ccymg?file=/src/App.js

Answer 1

使用Eval不是一个好主意。我认为你可以做到这一点。您可以将leftList, 和函数setleftlist1或setleftlist2,setRightList1或setRightList2作为参数传递并访问动态函数this const handleAllRight = (leftList, setleftlist, setRightList) => {       this[setRightList](leftList);       this[setleftlist]([]);      };

Answer 2

所以基本上你有一个集合数组。对于您的代码，这种结构似乎是 gpod：const myData = [  {    list1: [...],    list2: [...],  },  {    list1: [...],    list2: [...] ,  },]然后你可以推入这个集合，删除项目，并通过它们的索引访问它们