使用通用函数来处理用户在 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: [...] ,

  },

]

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