Question

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

好的，我们可以说我想编辑“状态”的属性＆＃39;来自＆＃34;待定＆＃34;删除＆＃34;删除＆＃34;对于数组中对象的特定属性，我将如何使用Object.Assign为以下示例执行此操作：

示例a :(注意对象数组存储在对象本身中）

＆＃13;

const plan = {
  task: [
    {
        id: 1,
        description: "This is a task",
        status: "pending"
    },
    {
        id: 2,
        description: "This is a second task",
        status: "pending"
    }
  ]
}

＆＃13;

示例b :(元素为对象的简单元素数组）

＆＃13;

const task2 = [
    {
        id: 1,
        description: "This is a task",
        status: "pending"
    },
    {
        id: 2,
        description: "This is a second task",
        status: "pending"
    }
]

＆＃13;

Answer 1

注意我使用了您第一个问题中的代码

好的，首先在你的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中你应该记录选择了什么动作，而不仅仅是消息＆＃34;删除＆＃34;。所以改为：

export const deleteTaskAction = (taskId) => {
        return {
            type: 'DELETE_TASK',
            payload: taskId //pass on task id
        }
    };

最后，在您的reducer-tasks.js中，您应该更新“状态”＆＃39;调度该操作时该特定列表项的属性（通过按钮单击）：

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;

这应该更新状态并从＆＃34; pending＆＃34;更改所选任务的状态。 to＆＃34;删除＆＃34;，它应触发重新渲染并更改该元素。

如果您有任何疑问/问题，请告诉我

Answer 2

好问题。你想要做的态射通常被称为镜头（实际上是一组更大的态射）。

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

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

2 个答案: