Javascript 如何在对象中展开嵌套属性？

我有这个东西在下面。我想知道如何选择特定项目并更新属性。例如项目1我想在数组中添加一个任务

item: {
  'item-1': {
    id: 'item-1',
    title: 'To do',
    task: ['task-1', 'task-2', 'task-3', 'task-4']
  },
  'item-2': {
    id: 'item-2',
    title: 'In progress',
    task: []
  },

我现在有

const getItem = {...state.items['item-1']}
const newTaskList = [...getItem.task, newTask.id]

const newState = {
      ...state,
      items: {
        ...state.items,
        //How do I spread new array correctly in item 1?
        //...state.items['item-1'].task
      }
    };

---

您需要使用对象键，即

item-1

，克隆其属性并为任务键添加新列表。简而言之，在覆盖要更新的密钥之前，需要在对象的每个级别进行克隆

const newState = {
  ...state,
  items: {
    ...state.items,
    'item-1': {
         ...state.items['item-1'],
         task: newTaskList
     }
  }
};

---

您需要使用对象键，即

item-1

，克隆其属性并为任务键添加新列表。简而言之，在覆盖要更新的密钥之前，需要在对象的每个级别进行克隆

const newState = {
  ...state,
  items: {
    ...state.items,
    'item-1': {
         ...state.items['item-1'],
         task: newTaskList
     }
  }
};

---

假设起点：

let state = {
    items: {
      'item-1': {
        id: 'item-1',
        title: 'To do',
        task: ['task-1', 'task-2', 'task-3', 'task-4']
      },
      'item-2': {
        id: 'item-2',
        title: 'In progress',
        task: []
      },
    }
};

如果要将任务添加到

item-1

的

task

数组中，而不修改现有的内容（这在React状态下很重要），则必须复制

状态

、

项

、

项-1

和

项-1

任务：

let newState = {
    ...state,
    items: {
        ...state.items,
        'item-1': {
            ...state.items['item-1'],
            task: [...state.items['item-1'].task, newTask]
        }
    }
};

实例：

let state={
项目：{
“第1项”：{
id:“第1项”，
标题：待办事项，
任务：['task-1'，'task-2'，'task-3'，'task-4']
},
“第2项”：{
id:'第2项'，
标题：“进行中”，
任务：[]
},
}
};
让newTask=“任务4”；
让newState={
……国家，
项目：{
…说明项目，
“第1项”：{
…说明项目['item-1']，
任务：[……状态。项['item-1']。任务，新任务]
}
}
};
console.log（newState）假设起点：

let state = {
    items: {
      'item-1': {
        id: 'item-1',
        title: 'To do',
        task: ['task-1', 'task-2', 'task-3', 'task-4']
      },
      'item-2': {
        id: 'item-2',
        title: 'In progress',
        task: []
      },
    }
};

如果要将任务添加到
item-1
的
task
数组中，而不修改现有的内容（这在React状态下很重要），则必须复制
状态
、
项
、
项-1
和
项-1
任务

：

let newState = {
    ...state,
    items: {
        ...state.items,
        'item-1': {
            ...state.items['item-1'],
            task: [...state.items['item-1'].task, newTask]
        }
    }
};

实例：

let state={
项目：{
“第1项”：{
id:“第1项”，
标题：待办事项，
任务：['task-1'，'task-2'，'task-3'，'task-4']
},
“第2项”：{
id:'第2项'，
标题：“进行中”，
任务：[]
},
}
};
让newTask=“任务4”；
让newState={
……国家，
项目：{
…说明项目，
“第1项”：{
…说明项目['item-1']，
任务：[……状态。项['item-1']。任务，新任务]
}
}
};
console.log（newState）在lodadash中，您可以从对象获取和设置嵌套对象，以下是我自己的实现：


//从对象获取道具的助手
const get=（对象、路径、默认值）=>{
const recur=（对象，路径）=>{
如果（对象===未定义）{
返回默认值；
}
if（path.length==0）{
返回对象；
}
返回recur（对象[path[0]]，path.slice（1））；
};
返回递归（对象、路径）；
};
//用于在对象中设置嵌套道具的辅助对象
常数集=(
国家,，
statePath，
修饰语
) => {
const recur=（结果，路径）=>{
常量键=路径[0]；
if（path.length==0）{
返回修饰符（get（state，statePath））；
}
返回数组.isArray（结果）
？结果图（（项目、索引）=>
索引===编号（键）
？重现（项目，路径切片（1））
：项目
)
: {
…结果，
[key]：递归（结果[key]，路径切片（1）），
};
};
const newState=recur（state，statePath）；
返回get（state，statePath）==get（newState，statePath）
？国家
：新闻状态；
};
让状态={
项目：{
“第1项”：{
id:“第1项”，
标题：待办事项，
任务：['task-1'，'task-2'，'task-3'，'task-4']，
},
“第2项”：{
id:'第2项'，
标题：“进行中”，
任务：[]，
},
},
};
console.log(
设置(
国家,，
['items'、'item-1'、'task']，
（tasks）=>tasks.concat（“新任务”）
)
);在lodadash中，您可以从对象获取和设置嵌套对象，以下是我自己的实现：


//从对象获取道具的助手
const get=（对象、路径、默认值）=>{
const recur=（对象，路径）=>{
如果（对象===未定义）{
返回默认值；
}
if（path.length==0）{
返回对象；
}
返回recur（对象[path[0]]，path.slice（1））；
};
返回递归（对象、路径）；
};
//用于在对象中设置嵌套道具的辅助对象
常数集=(
国家,，
statePath，
修饰语
) => {
const recur=（结果，路径）=>{
常量键=路径[0]；
if（path.length==0）{
返回修饰符（get（state，statePath））；
}
返回数组.isArray（结果）
？结果图（（项目、索引）=>
索引===编号（键）
？重现（项目，路径切片（1））
：项目
)
: {
…结果，
[key]：递归（结果[key]，路径切片（1）），
};
};
const newState=recur（state，statePath）；
返回get（state，statePath）==get（newState，statePath）
？国家
：新闻状态；
};
让状态={
项目：{
“第1项”：{
id:“第1项”，
标题：待办事项，
任务：['task-1'，'task-2'，'task-3'，'task-4']，
},
“第2项”：{
id:'第2项'，
标题：“进行中”，
任务：[]，
},
},
};
console.log(
设置(
国家,，
['items'、'item-1'、'task']，
（tasks）=>tasks.concat（“新任务”）
)
);很难帮助您，因为第一个代码块中的结构与代码不匹配。您的结构没有
列
或
项
，您的代码既有…？@t.J.Crowder它们都是项抱歉。请更正第一个代码块，并提供完整的示例，而不仅仅是状态对象的一部分。很难帮助您，因为第一个代码块中的结构与您的代码不匹配。您的结构没有<代码>栏>代码>或代码>项目< /代码>，您的代码都有…….t.j.Cuuldor，它们都是项目抱歉。请更正第一个代码块，并提供完整的示例，而不仅仅是状态对象的一部分。您可以考虑将“打开”改为“这里”。