使用map over onclick处理程序时,内部函数始终获取最后一个元素

我有一个嵌套的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 .

我希望它是第2行中指定的步骤ID( step_id: stepId )为什么会这样?我该怎么修?

我尝试使用bind绑定stepid,因为我认为这是一个javascript问题,其中包含的函数失去了它们的外部作用域,但这没有帮助。