[英]How to modify Properties of Objects within an Array
首先请注意,这是我的Redux代码HERE中的一个问题。
好的,可以说我想将“状态”的属性从“待处理”编辑为“已删除”,以更改数组中对象的特定属性,如何使用Object.Assign进行以下示例:
示例a :(注意对象数组存储在对象本身内)
const plan = { task: [ { id: 1, description: "This is a task", status: "pending" }, { id: 2, description: "This is a second task", status: "pending" } ] }
示例b :(一个简单的元素数组,其元素为对象)
const task2 = [ { id: 1, description: "This is a task", status: "pending" }, { id: 2, description: "This is a second task", status: "pending" } ]
注意我正在使用第一个问题中的代码
好的,首先在您的renderList函数中,您需要包括一个onclick处理程序以在完成任务时进行注册:
renderList() {
return this.props.tasks.tasks.map((task) => {
if(task.status == "pending"){
return (
<li key={task.id}>
{task.id} {task.description}
<button type="button">Finish</button>
<button type="button">Edit</button>
<button onClick={() => this.props.deleteTask(task.id)} type="button">Delete</button>
</li>
);
}
else return(
<div key={task.id}>
THIS TASK HAS BEEN DONE
</div>
);
}); }
接下来,在您的ActionIndex.js中,您应该记录选择了哪个动作,而不仅仅是消息“已删除”。 因此将其更改为:
export const deleteTaskAction = (taskId) => {
return {
type: 'DELETE_TASK',
payload: taskId //pass on task id
}
};
最后,在您的reducer-tasks.js文件中,应在分派该操作时(通过单击按钮)更新该特定列表项的'status'属性:
case 'DELETE_TASK':
let newTasks = state.tasks.map( (task) => {
if(task.id !== action.payload) {
return task;
}
return Object.assign({}, task, {status : "deleted"});
});
const newState = Object.assign({}, state, {tasks : newTasks});
return newState;
这将更新状态并将所选任务的状态从“待处理”更改为“已删除”,这将触发重新渲染并更改该元素。
让我知道您是否有任何问题
好问题。 您要进行的射影通常被称为镜头(实际上是一个更大的射影组)。
您可以使用纯JavaScript来实现,例如:
// Return a new object with the very same structure as plan and an amended list of tasks
return Object.assign({}, plan, {
tasks: plan.tasks.map(function (task) {
// Map every existing task to a totally new object with the very same structure and a new status
return Object.assign({}, task, { status: "deleted" })
})
})
第二个示例甚至更容易变形,请检查以下代码:
return task2.map(function (task) {
// Return a totally new object with the very same structure as task and a new status
return Object.assign({}, task, { status: "deleted" });
})
此外,还有一些可用的库可以完全满足您的要求,例如nanoscope
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.