При использовании map поверх обработчика onClick внутренняя функция всегда получает последний элемент

Question

У меня есть вложенный компонент JSX с функцией отображения с внутренней функцией отображения:

{steps.map(({
    step_id: stepId,
    step_name: stepName
}) => (
    <TableRow key={stepId}>
    (...)
    {steps.map(
      ({ step_id: id, name }) => (
          {stepId} // <- rendering the stepId leads to list of different numbers
          <MenuItem
            key={id}
            onClick={() => {
              this.addNeededStep(stepId, id); // <- stepId is ALWAYS the last in the list
              this.closeNeededStepSelector();
          }}
          >
            {name}
          </MenuItem>)
      )}
    </TableRow>
))}

Теперь при нажатии на обработчик onClick функция addNeededStep всегда получает последний stepId из steps.

Я ожидаю, что это будет stepId, указанный в строке 2 (step_id: stepId). Почему это происходит? И как я могу это исправить?

Я пытался использовать bind для привязки stepId, потому что я думал, что это проблема JavaScript, когда вложенные функции теряют свою внешнюю область видимости, но это не помогло.

Answer 1

Похоже, это прекрасно работает, как вы написали, по крайней мере, в этом простом примере на codepen . Можете ли вы предоставить больше исходного кода, возможно, что-то, что мешает значениям шагов?

class Clock extends React.Component {
  render() {
    const test = [{elem:1},{elem:2},{elem:3},{elem:4},{elem:5}]
    return (
      <div>
        {
          test.map(({elem: initElem}) => 
            test.map(elem => {
              return (
                <div onClick={() => { alert(initElem);} }>
                  {initElem}                   
                </div>
              );
            })
          )

        }
      </div>
    );
  }
}