javascript - 为什么在通过数组映射时使用索引传递给函数时，索引始终是最后一个索引？

我正在使用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中的关闭有关，但我不知道如何解决

请给我任何建议。预先感谢。

最佳答案

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

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

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

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