一、常规方法

1. 基础数据

const items = [
  {
    id: 1,
    title: 'Hi'
  },
  {
    id: 2,
    title: 'Pig'  
  }
]

const selectedId = 1

2. 选择

选择一个 item 的常规方法：

const selectedItem = items.filter(item => item.id === selectedId)[0]

3. 更新

更新一个 item 的常规方法：

const modifiedItem = items.map(item => {
  if (item.id === selectedId) {
    return { ...item, title: 'Hello' }
  } else {
    return item
  }
})

4. 删除

删除一个 item 的常规方法：

const filteredItems = items.filter(item => item.id !== selectedId)

二、Flatten State 方法

1. 修改后的数据结构

const items = {
  '1': {
    id: 1,
    title: 'Hi'
  },
  '2': {
    id: 2,
    title: 'Pig'
  }
}

const selectedId = 1

2. 选择

const selectedItem = items[selectedId]

3. 更新

const modifiedItem = {
  ...items,
  items[selectedId]: 'Hello'
}

4. 删除

delete items[selectedId]
const filteredItems = { ...items }

Flatten State 的优点

• 解决数据冗余
• 数据处理更容易