替换数组中的两个对象

Question

我正在尝试使用反应原生 redux 开发一个动态 DraggableFlatList，其中来自 onDragEnd 的更新数组被分派到商店。 因此，我试图创建一个 function ，其中我使用来自 onDragEnd 的返回 object 中的“from”和“to”参数在调度之前更改新数组。 例如，在下面的 object 中，我使用了三个项目，它们是数组中的对象：

Object {
  "data": Array [
    Object {
      "backgroundColor": "rgb(154, 0, 132)",
      "category": "Practical",
      "description": "Zero",
      "duedate": Object {
        "cond": false,
        "date": "",
      },
      "id": 0.7945943069813785,
      "iterations": "",
      "key": "0",
    },
    Object {
      "backgroundColor": "rgb(120, 5, 132)",
      "category": "Practical",
      "description": "One",
      "duedate": Object {
        "cond": false,
        "date": "",
      },
      "id": 0.8857539547977513,
      "iterations": "",
      "key": "1",
    },
    Object {
      "backgroundColor": "rgb(184, 10, 132)",
      "category": "Practical",
      "description": "Two ",
      "duedate": Object {
        "cond": false,
        "date": "",
      },
      "id": 0.11232602853449736,
      "iterations": "",
      "key": "2",
    },
  ],
  "from": 2,
  "to": 1,
}

在这里，我想将描述为“二”的 object 替换为描述为“一”的 object。 这些键无关紧要，因为我在渲染期间为它们提供了新的键。 到目前为止，正在执行替换的 function 看起来像这样：

const dragComplete = (item) => {
    let itemArray = item.data;
    // from object is going to be replaced with to object and visa vreca

    let indexFrom = item.from; 
    let indexTo = item.to; 

    
    let objMovesFrom = itemArray[indexFrom];
    let objMovesTo = itemArray[indexTo];
    let sortedArray = itemArray;
    console.log('Object moves from : ' + objMovesFrom.description);
    console.log('Obejct moves to : ' + objMovesTo.description);

    sortedArray.map((task, i) => {
      if ((i = indexFrom)) {
        sortedArray.splice(indexFrom, 1, objMovesTo);
      }
      if ((i = indexTo)) {
        sortedArray.splice(indexTo, 1, objMovesFrom);
      }
    });

    console.log(item);

   //dispatch(setTaskList(item.data));
  };

我还没有想出任何意义......感谢有用的答案！

Answer 1

只是简单地交换物品怎么样？

 const dragComplete = item => { const { from: sourceIndex, to: targetIndex, data: dragList, } = item; // // shallow `item.data` copy for a non mutating approach. // const swapList = Array.from(dragList); const dragItem = dragList[sourceIndex]; // swapList[sourceIndex]; const swapItem = dragList[targetIndex]; // swapList[targetIndex]; // simply swap items. // actively mutate `item.data`. // // `item.data` remains unmutated. dragList[targetIndex] = dragItem; // swapList[targetIndex] = dragItem; dragList[sourceIndex] = swapItem; // swapList[sourceIndex] = swapItem; console.log('Object moves from: ' + dragItem.description); console.log('Object moves to: ' + swapItem.description); // return swapList; }; const sample = { "data": [{ "backgroundColor": "rgb(154, 0, 132)", "category": "Practical", "description": "Zero", "duedate": { "cond": false, "date": "", }, "id": 0.7945943069813785, "iterations": "", "key": "0", }, { "backgroundColor": "rgb(120, 5, 132)", "category": "Practical", "description": "One", "duedate": { "cond": false, "date": "", }, "id": 0.8857539547977513, "iterations": "", "key": "1", }, { "backgroundColor": "rgb(184, 10, 132)", "category": "Practical", "description": "Two ", "duedate": { "cond": false, "date": "", }, "id": 0.11232602853449736, "iterations": "", "key": "2", }], "from": 2, "to": 1, }; console.log({ data: sample.data }); dragComplete(sample); console.log({ data: sample.data });

 .as-console-wrapper { min-height: 100%;important: top; 0; }