Javascript 使用公共函数处理基于用户单击REACT时的类似状态的多个数组的更改

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

但是我不能为这两个列表编写一个通用的handleAllRight函数。handleAllRight函数中唯一不同的是列表的编号。 这是我的handleAllRight函数，我在其中使用了if循环。但是，如果在其中传递任何列表，如何动态创建它。它应该负责传输检查用户单击的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链接

使用

Eval

不是一个好主意。我想你能做到。您可以将

leftList

和函数

setleftlist1

或

setleftlist2

、

setRightList1

或

setRightList2

作为参数传递，并使用

此

 const handleAllRight = (leftList, setleftlist, setRightList) => {
       this[setRightList](leftList);
       this[setleftlist]([]);
      };

---

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

const myData=[
{
清单1:[…]，
清单2:[…]，
},
{
清单1:[…]，
清单2:[…]，
},
]

---

然后您可以进入这个集合，删除项，并通过它们的索引访问它们

是的，通过在调用函数的jsx中传递数组参数的状态，它可以完美地工作。这是我想做的事。我的是一个功能组件，所以没有使用：）谢谢，相信它会减少我JSX中的代码行。谢谢你的建议。