利用Flatten State更优雅的修改 React 的 State 结构数据(数组对象元素)

一、常规方法

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 的优点

  • 解决数据冗余
  • 数据处理更容易
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容