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

Question

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

       <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 时调用的函数。组件。