javascript - 替换数组中的两个对象
问题描述
我正在尝试使用 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));
};
我还没有想出任何意义......感谢有用的答案!
解决方案
只是简单地交换物品怎么样?
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; }
推荐阅读
- xamarin - Xamarin.Forms:颜色资源不适用于自定义控件的颜色属性
- python - 从 python selenium web 驱动程序中的文本裁剪整数
- google-apps-script - GAS Gmail to Drive:将附加的 zip 文件保存到 Google Drive
- ios - 第三方库依赖版本控制策略
- r - R包:如何根据NAMESPACE导入自动生成DESC中的`Imports`字段
- javafx - javafx prism包中的d3d、es2、j2d、null3d、sw分别代表什么?
- asp.net - 如何通过用户名获取 IdentityUser
- vue.js - 将焦点设置为按钮时,无法读取 VUE 中未定义的属性“焦点”
- apache-spark - 在 ifnull() 中获取 NULL 值而不是设置值
- flutter - StreamBuilder 可以返回列表吗