如何修改数组中对象的属性 [英] How to modify Properties of Objects within an Array

问题描述

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

First note that this is a question from my Redux code HERE.

好吧，可以这么说，我想将状态"的属性从待处理"编辑为已删除"，以更改为数组中对象的特定属性，我将如何使用Object.Assign来做到这一点.以下示例:

Okay so lets say I want to edit the property of 'status' from "pending" to "deleted" to a specific property of an object within an array, how would I be able to do this using Object.Assign for the following examples:

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

推荐答案

注意我正在使用第一个问题中的代码

NOTE I'm using the code from your first question

好吧，首先在您的renderList函数中，您需要包括一个onclick处理程序以在完成任务时进行注册:

Ok so firstly in your renderList function you'll need to include an onclick handler to register when a task is done:

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中，您应该记录选择了哪个动作，而不仅仅是消息已删除".因此，将其更改为:

Next, in your ActionIndex.js you should be recording WHICH action was selected, not just the message "deleted". SO change it to this:

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

最后，在调度该动作(通过单击按钮)时，应在reducer-tasks.js中更新该特定列表项的'status'属性:

Finally, in your reducer-tasks.js you should update the 'status' property of that specific list item when that action is dispatched (via the button click):

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;

这应该更新状态并将所选任务的状态从待处理"更改为已删除"，这将触发重新渲染并更改该元素.

This should update the state and change the status of the selected task from "pending" to "deleted", which should trigger a re-render and change that element.

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

Let me know if you have any questions/issues

这篇关于如何修改数组中对象的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！