代码之家 › 专栏 › 技术社区 › user2609980

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

jsx reactjs javascript

user2609980 · 技术社区 · 6 年前

我有一个嵌套的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问题,其中包含的函数失去了它们的外部作用域,但这没有帮助。

1 回复 | 直到 6 年前

nubinub 6 年前

这似乎很好地工作方式,你写它,至少有这个简单的例子 codepen . 你能提供更多的源代码吗,也许是一些与steps值相冲突的东西?

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>
    );
  }
}

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前