如何修改数组中对象的属性

How to modify Properties of Objects within an Array

本文关键字：对象 属性 数组 何修改 修改      更新时间：2023-09-26

首先请注意，这是我的Redux代码中的一个问题。

好的，假设我想编辑'status'的属性从"pending"到"deleted"到数组中一个对象的特定属性，我如何使用object来做到这一点。为以下示例分配:

例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"
    }
]

问得好。您所要做的态射通常被称为透镜(实际上是一组更大的态射)。

可以用纯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

我使用的是你第一个问题中的代码

首先，在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;

这将更新状态，并将所选任务的状态从"pending"更改为"deleted"，这将触发重新呈现并更改该元素。

如果有任何问题请告诉我

相关文章：