Javascript многомерная карта и функция уменьшения - PullRequest
Новая
       6

Javascript многомерная карта и функция уменьшения

1 голос
/ 25 января 2020

Я хотел бы отобразить меню, которое динамически изменяется, зависит от условий пользователя и реквизитов, а именно: если это каталог root, выбран ли элемент или есть ли у пользователя разрешение. И вот список объектов menu. 

const menus = [
      { 'id': 1, 'onHidden': ['root', 'user'] },
      { 'id': 2, 'onHidden': ['root', 'user'] },
      { 'id': 3, 'onHidden': ['user', 'unselected'] },
      { 'id': 4, 'onHidden': ['user', 'unselected'] },
      { 'id': 5, 'onHidden': ['unselected'] },
      { 'id': 6, 'onHidden': ['root', 'user'] },
      { 'id': 7, 'onHidden': ['user', 'unselected'] },
    ]

А на переднем конце с React я передам условия функции как объект массива, подобный этому: 

const shownMenues = pickShownMenus([
      this.props.parent === 0 ? 'root' : false,
      this.props.selected < 0 ? 'unselected' : false,
      this.props.user.permission > 2 ? 'user' : false,
    ])

on pickShownMenus() функция пытается вернуть массив menu.id, такой как [3, 4, 5, 7] для root каталога, [5] для root каталога, когда элемент не выбран.

вопрос : Я пытался использовать функцию map и lower для получения результата, но он возвращает результат, отличный от того, который я ожидал, потому что вторая итерация отображения перезапишет все .... Так как я могу предотвратить перезапись и получить результат сбора?

Вот функция, которую я использовал (не работает): 

const pickShownMenus = (props) => {
  const p = props.slice()
  const propsArr = p.filter((x) => x != false)
  const reduce = menus.reduce((arr, menu) => {
    propsArr.map((props) => {
      if (menu.onHidden.indexOf(props) < 0) {
        arr.push(menu.id)
      }
    })
    return arr
  }, [])

  return reduce
}

1 Ответ

2 голосов
/ 25 января 2020

Итак, учитывая, что эта ситуация основана на том, что вы предоставили: 

const menus = [
  { 'id': 1, 'onHidden': ['root', 'user'] },
  { 'id': 2, 'onHidden': ['root', 'user'] },
  { 'id': 3, 'onHidden': ['user', 'unselected'] },
  { 'id': 4, 'onHidden': ['user', 'unselected'] },
  { 'id': 5, 'onHidden': ['unselected'] },
  { 'id': 6, 'onHidden': ['root', 'user'] },
  { 'id': 7, 'onHidden': ['user', 'unselected'] },
]

const props = {
  parent: 1,
  selected: -1,
  user: {
    permission: 1
  }
};

const params = [
  props.parent === 0 ? 'root' : false,
  props.selected < 0 ? 'unselected' : false,
  props.user.permission > 2 ? 'user' : false,
]

Исходя из этого, pickShownMenus должно выглядеть примерно так: 

const pickShownMenus = (params) => {
    const filtered_params = params
        .filter(elm => !!elm) // Remove the falses
    return menus
        .filter(menu => 
          menu.onHidden
            .some(onHiddenDirective => 
              filtered_params
                .find(filtered_param => 
                  filtered_param === onHiddenDirective
                )
            )
        )
        .map(menu => menu.id) // output: [3, 4, 5, 7]

  }
...