Как передать объект во внутрь метода перебора массива?

Question

[Антон]

Имеется вот такой кусок кода:

tasksData.infoTask.map((task) => (
  <Menu
    id="menu-per-team"
    anchorEl={engineerOfTeam}
    keepMounted
    open={Boolean(engineerOfTeam)}
    onClose={closeMenuPerTeam}
   >
    {mainInformation.userTeam[0].map((value) => (
        <MenuItem onClick={() => closeMenuPerTeam({
            ID: task.ID, // Сюда попадает значение последнего элемента массива task, а не той итерации в которой открывается данное меню.
            ROUTE_USER: value,
        })}>
    {value}
    </MenuItem>))}
   </Menu>

Проблема в том, что внутри метода mainInformation.userTeam[0].map используются данные task.ID из перебора верхнего уровня tasksData.infoTask.map. И почему то присваивается значение самого последнего индекса массива tasksData.infoTask, а не той итерации, в которой происходит выполнение кода.
Вопрос: как передать нужную task.ID в mainInformation.userTeam[0].map?
Если указать вот так tasksData.infoTask[0].ID то внутри перебора отображается все правильно, но если изменить на нужную итерацию tasksData.infoTask[task].ID, то вообще ошибка.

Comments

[Александр]

Песочницу в студию.

[Антон]

Александр, что за песочница?

[Александр]

Антон, Для React можно CodeSandbox или StackBlitz

[Антон]

Александр, а зачем здесь это? Или вы предлагаете мне туда весь код сгрузить?

[Александр]

Антон, Ну да. Чтобы можно было посмотреть. Можно не весь, только тот, с которым проблема.

[Антон]

Александр, я никак не смогу туда все запихнуть, так как массивы хранятся в redux’е,куда попадают с API, css на material-ui, и кода на 3К строк. Неправильно работает написаный выше кусок, разве без песочницы не обойтись? Как я думаю, корать нужно в сторону правильного синтаксиса для проброса данных одного массива в метод перебора другого.

[Антон]

Александр, https://codesandbox.io/s/zen-mestorf-6g8vz?file=/s...

[Антон]

Ни у кого нет предположений, почему так происходит?

[Егор Живагин]

Антон, ответил ниже

Добавлю в комменте, что вложенные циклы в рендере -- это очень долго и плохо) Как и в любом другом месте. Сложность алгоритма кратно возрастает, как и время его выполнения. Я бы порекомендовал рендер MenuItem перенести в компонент Menu

[Антон]

Егор Живагин, пока что сделано так. Нужно показать более-менее работающее приложение. А дальше уже буде оптимизировать все.

Answer 1

[Егор Живагин]

// Сделайте отдельный метод onClick
onClick = (task, value) => () => {
  closeMenuPerTeam({
            ID: task.ID,
            ROUTE_USER: value,
        })
}

{mainInformation.userTeam[0].map((value) => (
        <MenuItem onClick={ this.onClick(task, value) }>
    {value}
    </MenuItem>))}
   </Menu>

Таким образом вы:
1 - однозначно прокидываете task в хэндлер в момент отрисовки компонента, а не в момент вызова onClick, как было до этого (в чём и заключалась проблема)
2 - Избавляетесь от анонимной функции в onClick, погуглите почему не стоит так делать

Comments

[Антон]

Немного не понял, вот этот кусок:

onCLick = (task, value) => () => {
  closeMenuPerTeam({
            ID: task.ID,
            ROUTE_USER: value,
        })
}

где нужно прописать?
Внутри React.Fragment она работать не будет же?

[Егор Живагин]

Антон, ну, у вас же есть какой-то компонент, где всё это происходит?

class MyComponent extend React.Component {
...
onClick = (task, value) => () => {
  closeMenuPerTeam({
            ID: task.ID,
            ROUTE_USER: value,
        })
}
...
render() {
  ...
}

}

Если компонент - чистая функция, то onClick можно просто как константу внутри неё объявить

[Антон]

Егор Живагин, у меня класса нет. Все сделано таким образом:

function ComponentName ({mainInformation, tasksData}) {
  const closeMenuPerTeam = () => {
    setActionRequest(data);
  }
return (
   <React.Fragment>
     <div>
     ...
    </div>
   </React.Fragment>
);

Поэтому и не ясно, где метод новый добавить. И внутри компонент this. работать не будет.

[Егор Живагин]

Антон, я про это как раз в самом конце написал, делайте константой, как closeMenuPerTeam :

function ComponentName ({mainInformation, tasksData}) {
  const closeMenuPerTeam = () => {
    setActionRequest(data);
  }

  const onClick = (task, value) => () => {
      closeMenuPerTeam({
            ID: task.ID,
            ROUTE_USER: value,
      })
  }

return (
   <React.Fragment>
     <div>
     ...
    </div>
   </React.Fragment>
);

В таком случае вместо this.onClick просто пишете onClick(task, value)

[Антон]

Егор Живагин, Сделал. Все работает, но результат тот же. task передается крайний в массиве, а не нужный. Чудеса какие то.
Получается что именно в этот момент:
<MenuItem onClick={ onClick(task, value) }>
В task попадает не нужная task нам. В чем и заключается главный вопрос: "Как передать объект во внутрь метода перебора массива?" :)

[Антон]

Егор Живагин, Даже если вот так написать:

{mainInformation.userTeam[0].map((value) => (
        <MenuItem onClick={() => closeMenuPerTeam({
            ID: task.ID,
            ROUTE_USER: value,
        })}>
    {value} {task.ID} // Никуда не передавая, просто отображаем значение.

Оно уже не правильное отображается. Т.е. в метод перебора приходят неверные данные.

[Егор Живагин]

Антон, это очень странное поведение. Мне тут тяжело что-то подсказать без рабочего примера в codesandbox , например. Но если вы перенесёте отрисовку MenuItem в компонент Menu -- эта проблема должна решиться

[Антон]

Егор Живагин, да я не представляю, как перености в codesandbox, у меня код в 10 файлах фронтенда и еще бэкенд.
Вы предлагаете для каждого MenuItem делать отдельный компонент?

[Егор Живагин]

Антон, переносить можно просто: накидать там пример похожий на ваш, где воспроизводится такая же ошибка

Я предлагаю убрать отсюда строки с выводом MenuItem и прокинуть нужные для них данные через пропсы в Menu . Получится примерно так:

{ tasksData.infoTask.map((task) => (
  <Menu
    id="menu-per-team"
    anchorEl={engineerOfTeam}
    keepMounted
    open={Boolean(engineerOfTeam)}
    onClose={closeMenuPerTeam}
    // новые пропсы
   items={ mainInformation.userTeam[0] }
   taskId={ task.id }
   />
)}

И уже в компоненте Menu вместо вывода children делать что-то наподобие:

// Предварительно нужно достать items и taskId из props или this.props
  items.map(value => {
     <MenuItem onClick={() => closeMenuPerTeam({
            ID: taskId,
            ROUTE_USER: value,
     })}> {value} </MenuItem>
  })

[Антон]

Егор Живагин, Егор, вот так да, должно работать. Только еще один, последний, бестолковый вопрос:
А как предварительно достать items и taskId из props? Потому что они у меня через mapDispatchToProps работают.

[Егор Живагин]

Антон, просто сделать const { taskId } = props; , эти пропсы никак не связаны с mapStateToProps/mapDispatchToProps

[Антон]

Егор Живагин, где сделать?
Я вчера хотел так "обмануть" React :) Создавал константу и пытался туда засунуть task.ID, но она опять же перезаписывалась при каждой итерации и в конце оставалась крайняя.

[Егор Живагин]

Антон, конечно :)
Покажите, пожалуйста, код компонента Menu и я подскажу, где сделать

[Антон]

Это компонент из библиотеки Material-UI. Выглядит так:

import * as React from 'react';
import { PopoverProps } from '../Popover';
import { MenuListProps } from '../MenuList';
import { PaperProps } from '../Paper';
import { StandardProps } from '..';
import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';

export interface MenuProps
  extends StandardProps<PopoverProps & Partial<TransitionHandlerProps>, MenuClassKey> {
  anchorEl?: PopoverProps['anchorEl'];
  autoFocus?: boolean;
  children?: React.ReactNode;
  disableAutoFocusItem?: boolean;
  MenuListProps?: Partial<MenuListProps>;
  onClose?: PopoverProps['onClose'];
  onEnter?: PopoverProps['onEnter'];
  onEntered?: PopoverProps['onEntered'];
  onEntering?: PopoverProps['onEntering'];
  onExit?: PopoverProps['onExit'];
  onExited?: PopoverProps['onExited'];
  onExiting?: PopoverProps['onExiting'];
  open: boolean;
  PopoverClasses?: PopoverProps['classes'];
  transitionDuration?: TransitionProps['timeout'] | 'auto';
  variant?: 'menu' | 'selectedMenu';
}
export type MenuClassKey = 'paper' | 'list';
export default function Menu(props: MenuProps): JSX.Element;

Попробовал прописать новые пропсы в компоненте Menu аналогично anchorEl - так не работает. :)

[Егор Живагин]

Антон, это просто интерфейс для TypeScript компонента... Тогда никак, этот вариант отметается

[Антон]

Егор Живагин, да прям беда какая-то. Зачем все так сложно то кто-то сделал? :)
Какие еще варианты?

[Егор Живагин]

Антон, я накидал похожий код в песочнице, там всё работает - ссылка codesandbox

[Антон]

Егор Живагин, действительно, в песочнице работает. Сейчас попробую переписать для моего случая. :) Позже отпишусь что из этого вышло.

[Антон]

Егор Живагин, к сожалению не работает такой подход. Если я делаю все тоже самое, т.е. перебор массива просто в компоненте, например который и открывает данное меню, то все работает идеально.
Но если взять и вложить эту переменную task.ID в , даже не в перебор массива, а просто в , то все работает по старому. Так происходит потому что рендерится вместе со всем компонентом, а уже когда все отрисовано и только после нажатия на кнопку.
Очень паршивая ситуация, требующая какого то неординарного решения. :)

Есть задумка: Как при переборе массива сделать константу привязанную к шагу итерации? Тогда я бы написал вот так:
tasksData.infoTask[константа номера итерации].ID
Я когда так пишу, но вместо константы пишу вручную 0, 1, 2, ..., то все работает как надо. ;)
В общем, нужно алгоритм хранения номера итерации в каждой итерации.

[Антон]

Егор Живагин, к сожалению так и не удалось победить данную задачу. Пришлось переделать интерфейс данного компонента, вместо меню задействовать кнопки, которые рендерятся вместе со всем компонентом и не приводят к такой "ошибке".
Егор, спасибо большое за оказанную почту.
Если вдруг придут в голову еще варианты, пиши, не стесняйся. :)