使用通用函数来处理 REACT 中用户单击时多个基于数组的类似状态的更改

Question

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

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

const handleAllRight = listNumber => {
if (listNumber === 1) {
setRightlist1(leftlist1);
setleftlist1([]);
}
if(listNumber === 2){
setRightlist2(leftlist2)
setleftlist2([]);
}
};

但我不想使用该条件，因为可能有很多列表，因此会增加代码行的大小。 我尝试的另一件事是使用 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

所以基本上你有一个集合数组。这个结构似乎适合你的代码：

const myData = [
{
list1: [...],
list2: [...],
},
{
list1: [...],
list2: [...] ,
},
]

然后，您可以推送到此集合中，删除项目，并通过索引访问它们