为什么在映射数组时使用它传递给函数时索引总是最后一个索引？

Question

我正在使用 map 循环从服务器获取的数组对象，每个对象用于表中的一行来显示数据。我想通过调用函数并传递给索引对每一行执行特定操作。 这里的代码：

       <TableBody>
          {productsData.map((product, index) => {
            return (
              <TableRow key={product.productId}>
                <TableCell>
                  <Button
                    aria-owns={anchorEl ? `manipulation${index}` : undefined}
                    aria-haspopup="true"
                    onClick={handleClick}
                    className={classes.button}
                    size="small"
                    variant="contained"
                  >
                    Thao tác
                  </Button>
                  <Menu id={`manipulation${index}`} anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
                    <MenuItem onClick={**handleOpen(index)**}>Xem trước</MenuItem>
                  </Menu>
                </TableCell>
              </TableRow>
             )
           })}
        </TableBody>

我声明handleOpen的方式：const handleOpen = (index) => () => {...} =>我预计handleOpen会像这样呈现：第0行的handleOpen（0），第1行的handleOpen（1）。但它总是以数组的最后一个索引结束。可能是关于javascript中的关闭，但我不知道如何修复

请给我任何建议。提前致谢。

Answer 1

您所做的方式将在渲染后立即调用 handleOpen 函数，而不是像您希望的那样仅在单击时调用它。

要解决此问题，请使用匿名函数：

<MenuItem onClick={() => handleOpen(index)}>

这将创建一个仅在实际点击 MenuItem 组件时调用的函数。