JavaScript/TypeScript如何更新嵌套数组且避免触发no-param-reassign警告

解决方案 #

你需要对嵌套的submenu数组同样做「拷贝原对象+新增属性」的处理，不要直接修改遍历得到的sm参数对象，也不要修改原MENUS_LIST里的submenu数组，参考实现如下：

// 假设当前路径变量为 currentPath
const currentPath = '/analytics/sales/overview'

const menuX = (MENUS_LIST as MenuListingProps[]).map((m: MenuListingProps) => {
  // 遍历处理子菜单，每一项拷贝后新增属性，不修改原对象
  const processedSubmenu = (m.submenu as MenuItemProps[]).map((sm: MenuItemProps) => {
    return {
      ...sm,
      // 按业务逻辑判断子菜单激活状态
      isActive: sm.path === currentPath,
      icon: 'abc',
      title: 'xyz'
    }
  })
  // 主菜单激活逻辑：子菜单存在激活项则主菜单激活
  const menuIsActive = processedSubmenu.some(item => item.isActive)
  // 拷贝外层主菜单对象，替换为处理后的子菜单数组
  return {
    ...m,
    isActive: menuIsActive,
    submenu: processedSubmenu
  }
})

说明 #

• 把原来遍历submenu的forEach替换为map，返回新的子菜单对象，全程不会修改遍历参数和原数组对象，自然不会触发linter的参数修改警告
• 所有数据都是新生成的，不会污染原始的MENUS_LIST常量，符合不可变数据的开发最佳实践

内容的提问来源于stack exchange，提问作者yoges nsamy