如何在 Object 中传播嵌套属性？

Question

I have this object below. I was wondering how I can select a specific item and update a property. For example. Item 1 I want to add a task in the array.

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: []
  },

I currently have

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
      }
    };

Answer 1

Assuming the starting point:

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: []
      },
    }
};

If you want to add a task to item-1 's task array without modifying things in place (which is important in React state), you have to copy state , items , item-1 , and item-1 's task :

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

Live Example:

 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: [] }, } }; let newTask = "task-4"; let newState = {...state, items: {...state.items, 'item-1': {...state.items['item-1'], task: [...state.items['item-1'].task, newTask] } } }; console.log(newState);

Answer 2

You need to use the object key ie item-1 and clone the properties for it and add the new list for the task key. In short you need to clone at each level of the object before overriding the key that you wish to update

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

Answer 3

In lodadash you can get and set nested object from an object, here is my own implementation of it:

 //helper to get prop from object const get = (object, path, defaultValue) => { const recur = (object, path) => { if (object === undefined) { return defaultValue; } if (path.length === 0) { return object; } return recur(object[path[0]], path.slice(1)); }; return recur(object, path); }; //helper to set nested prop in object const set = ( state, statePath, modifier ) => { const recur = (result, path) => { const key = path[0]; if (path.length === 0) { return modifier(get(state, statePath)); } return Array.isArray(result)? result.map((item, index) => index === Number(key)? recur(item, path.slice(1)): item ): {...result, [key]: recur(result[key], path.slice(1)), }; }; const newState = recur(state, statePath); return get(state, statePath) === get(newState, statePath)? state: 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: [], }, }, }; console.log( set( state, ['items','item-1','task'], (tasks)=>tasks.concat('new task') ) );

You can put the get and set in a library and it would make setting deeply nested values easier on the eyes of future readers of your code.