Question

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

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,
}

在这里，我希望描述为“二”的对象与描述为“一”的对象改变位置。键并不重要，因为我在渲染过程中渲染时给了它们新的键。到目前为止，执行替换的函数如下所示：

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; }

替换数组中的两个对象

1 个答案: