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。

我希望它是第2行（step_id: stepId）中指定的stepId。为什么会这样？我该如何解决？

我尝试使用bind绑定stepId，因为我认为这是一个JavaScript问题，其中封闭函数失去了外部作用域，但这无济于事。

Answer 1

至少在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>
    );
  }
}

在onClick处理程序上使用地图时，内部函数始终会获取最后一个元素

1 个答案: