为什么在映射数组状态时使用它传递给 MenuItem onClick 时索引始终是最后一个索引？答案

【问题标题】：Why the index is always the last index when using it to pass to MenuItem onClick while map over an array State?为什么在映射数组状态时使用它传递给 MenuItem onClick 时索引始终是最后一个索引？
【发布时间】：2022-10-01 02:04:23
【问题描述】：

有一组对象存在于名为talks的状态中

[
    {
        \"firstName\": \"B\",
        \"lastName\": \"W\",
        \"day\": \"2022-09-30T23:06:26.000Z\",
        \"reasons\": [
            \"Car related questions\"
        ],
        \"description\": \"\"
    },
    {
        \"firstName\": \"Kevin\",
        \"lastName\": \"L\",
        \"day\": \"2022-09-30T23:06:26.000Z\",
        \"reasons\": [
            \"Car related questions\"
        ],
        \"description\": \"\"
    },
    {
        \"firstName\": \"M\",
        \"lastName\": \"K\",
        \"day\": \"2022-09-30T23:06:26.000Z\",
        \"reasons\": [
            \"Car related questions\"
        ],
        \"description\": \"\"
    }
]

有 map 功能 map state\'s individual object to a Card 组件

talks.map((talk, index) => {
          return
            <Card>
              <CardHeader
                avatar={
                  <Avatar sx={{ bgcolor: \'secondary.main\' }} aria-label=\"recipe\">
                    {talk.firstName.charAt(0)}
                  </Avatar>
                }
                action={
                  <div>
                    <IconButton onClick={(e) => setCardMoreOpen(e.currentTarget)} aria-label=\"settings\">
                      <MoreVertIcon />
                    </IconButton>
                    <StyledEngineProvider injectFirst>
                      <Menu
                        elevation={1}
                        id=\"basic-menu\"
                        anchorEl={cardMoreOpen}
                        open={Boolean(cardMoreOpen)}
                        onClose={() => setCardMoreOpen(null)}
                      >
                        <MenuItem key={index} onClick={menuUpdate(index)}>Edit</MenuItem>
                        <MenuItem onClick={() => setCardMoreOpen(null)}>Delete</MenuItem>
                      </Menu>
                    </StyledEngineProvider>
                  </div>
                }
                title={title}
                subheader={time}
              />
              <CardContent>
                {
                  reasons.map(
                    (reason, index) => (
                      reason === \'Other\' ?
                        <Typography key={index} variant=\"body2\">
                          {description}
                        </Typography> :
                        <Typography key={index} variant=\"body2\">
                          {reason}
                        </Typography>
                    )
                  )
                }
              </CardContent>
            </Card>

理想情况下，menuUpdate(index) 里面的<MenuItem key={index} onClick={menuUpdate(index)}>Edit</MenuItem> 可以更新状态变量，因此每个卡片组件都与状态数组中的每个对象相关联，并具有更新状态对象的能力。

const menuUpdate = index => e=> {
    console.log(index)
  }

但是，索引始终是状态数组的最后一个索引。我还尝试在 onClick、onClick={()=>menuUpdate(index)} 和回调函数中使用箭头函数作为

const menuUpdate = (index) => {
    console.log(index)
  }

没运气。任何人都可以提供帮助吗？卡在这里很久了。提前致谢！

我觉得这是一种奇怪的行为，你可以把你的代码上传到小吃，看看它来自哪里

标签： javascript reactjs material-ui

【解决方案1】：

我自己想出了答案。我需要将卡片提取到另一个组件中并将索引作为道具传递，以便我可以单独更新它。希望这会有所帮助。

【讨论】：