Почему индекс всегда является последним индексом при его использовании для передачи в функцию при отображении в массив?

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 будет отображаться так: handleOpen (0) для строки 0, handleOpen (1) для строки 1. Ноэто всегда заканчивается последним индексом массива.Может быть о закрытии в javascript, но я не знаю, как исправить

Пожалуйста, дайте мне любое предложение.Спасибо заранее.

Answer 1

То, как вы это сделали, будет вызывать функцию handleOpen сразу после рендеринга, а не вызывать ее только по щелчку, как вы этого хотите.

Чтобы исправить это, используйте анонимную функцию:

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

Это создаст функцию, которая будет вызываться только при фактическом щелчке компонента MenuItem.