如何使 onClick 事件与 a.map() function 中的特定元素一起工作？

Question

我正在尝试在聊天中列出用户列表。 每个用户都应该有一个打开菜单的按钮，允许管理员禁止该特定用户。 我正在映射一组用户以获取列表，但问题是每当我尝试单击“禁止”按钮时，用户数据似乎总是用于数组中的最后一个用户，而不是用户我点击了。 这是整个组件的代码：

const UserList: React.FC<{channel: string}> = ({channel}) => {
    const [channelMembers, setChannelMembers] = useState<any[] | null>(null)
    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
    const [isAdmin, setIsAdmin] = useState(false)
    const navigate = useNavigate()
    const open = Boolean(anchorEl)
    const baseUrl = useContext(UrlContext)

    useEffect(() => {
        axios.get(baseUrl + `chat/${channel}/users`, {withCredentials: true}).then((response) => {
            setChannelMembers(response.data)
        })
    }, [baseUrl, channel, anchorEl])

    useEffect(() => {
        axios.get(baseUrl + `users/me`, {withCredentials: true}).then((response) => {
            axios.get(baseUrl + `chat/${channel}/admins`, {withCredentials: true}).then((resp2) => {
                if (resp2.data.includes(response.data.id)) {
                    setIsAdmin(true)
                }
            }).catch((error) => {
                console.log(error)
            })
        }).catch((error) => {
            console.log(error)
        })
    }, [baseUrl, anchorEl])

    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget)
    }

    const handleClose = () => {
        setAnchorEl(null)
    }
    
    const handleBan = (user: any) => () => {
        let banUser = {...user}

        console.log(banUser)
        axios.post(baseUrl + `chat/${channel}/ban`, banUser, {withCredentials: true}).catch((error) => {
            console.log(error)
        })
        handleClose()
    }

    return (
        <>
        <Drawer
            sx={{
                width: drawerWidth,
                flexShrink: 0,
                '& .MuiDrawer-paper': {
                    width: drawerWidth,
                    boxSizing: 'border-box',
                },
            }}
            variant="permanent"
            anchor="right"
        >
            <Toolbar />
            <List>
                {channelMembers?.map((user: any, index: number) => {

                    return (
                        <Fragment key={index}>
                            <ListItem>
                                <ListItemText primary={user.name} />
                                <ListItemIcon>
                                    {(user.status === Status.ONLINE) ? <CircleIcon style={{color: "green"}} fontSize="small" /> : <RadioButtonUncheckedIcon style={{color: "grey"}} fontSize="small" />}
                                </ListItemIcon>
                                <IconButton
                                    aria-label="more"
                                    id="long-button"
                                    aria-controls={open ? 'long-menu' : undefined}
                                    aria-expanded={open ? 'true' : undefined}
                                    aria-haspopup="true"
                                    onClick={handleClick}
                                >
                                    <MoreVertIcon />
                                </IconButton>
                                <Menu
                                    id="long-menu"
                                    MenuListProps={{
                                        'aria-labelledby': 'long-button'
                                    }}
                                    anchorEl={anchorEl}
                                    open={open}
                                    onClose={handleClose}
                                >
                                    {isAdmin &&
                                    [<MenuItem onClick={handleClose}>
                                        <Typography>
                                            Make admin
                                        </Typography>
                                    </MenuItem>,
                                    <MenuItem onClick={handleClose}>
                                        <Typography>
                                            Mute
                                        </Typography>
                                    </MenuItem>,
                                    <MenuItem onClick={handleClose}>
                                        <Typography>
                                            Kick
                                        </Typography>
                                    </MenuItem>,
                                    <MenuItem onClick={handleBan(user)}>
                                        <Typography>
                                            Ban
                                        </Typography>
                                    </MenuItem>]}
                                    <MenuItem onClick={handleClose}>
                                        <Typography>
                                            View profile
                                        </Typography>
                                    </MenuItem>
                                    <MenuItem onClick={handleClose}>
                                        <Typography>
                                            Invite to play
                                        </Typography>
                                    </MenuItem>
                                </Menu>
                            </ListItem>
                            <hr />
                        </Fragment>
                    )
}               )}
            </List>
        </Drawer>
        </>
    )
}

Answer 1

您在 map 中呈现多个菜单，并且由于您在打开一个菜单时仅使用一个 state ，因此它设置open为true ，这意味着所有菜单都因为这个道具而open={open} 。

您应该尝试仅呈现一个菜单，并可能将所选用户存储在 state 中。 可能有更好的方法来做到这一点，但它应该可以解决您的问题。

Answer 2

而不是这样做：
onClick={handleBan(user)}

将匿名 function 传递给您的点击，因此您可以像这样传递正确的用户：
onClick={() => handleBan(user)}

这是一个代码沙箱，显示了这两种方法的不同之处。

Answer 3

您正在调用禁令handleBan(user)而不是() => handleBan(user) ， function 并使用它的返回值。

试试这个代码

const UserList: React.FC<{ channel: string }> = ({ channel }) => {
  const [channelMembers, setChannelMembers] = useState<any[] | null>(null);
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [isAdmin, setIsAdmin] = useState(false);
  const navigate = useNavigate();
  const open = Boolean(anchorEl);
  const baseUrl = useContext(UrlContext);

  useEffect(() => {
    axios
      .get(baseUrl + `chat/${channel}/users`, { withCredentials: true })
      .then((response) => {
        setChannelMembers(response.data);
      });
  }, [baseUrl, channel, anchorEl]);

  useEffect(() => {
    axios
      .get(baseUrl + `users/me`, { withCredentials: true })
      .then((response) => {
        axios
          .get(baseUrl + `chat/${channel}/admins`, { withCredentials: true })
          .then((resp2) => {
            if (resp2.data.includes(response.data.id)) {
              setIsAdmin(true);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      })
      .catch((error) => {
        console.log(error);
      });
  }, [baseUrl, anchorEl]);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleBan = (user: any) => () => {
    let banUser = { ...user };

    console.log(banUser);
    axios
      .post(baseUrl + `chat/${channel}/ban`, banUser, { withCredentials: true })
      .catch((error) => {
        console.log(error);
      });
    handleClose();
  };

  return (
    <>
      <Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          "& .MuiDrawer-paper": {
            width: drawerWidth,
            boxSizing: "border-box"
          }
        }}
        variant="permanent"
        anchor="right"
      >
        <Toolbar />
        <List>
          {channelMembers?.map((user: any, index: number) => {
            return (
              <Fragment key={index}>
                <ListItem>
                  <ListItemText primary={user.name} />
                  <ListItemIcon>
                    {user.status === Status.ONLINE ? (
                      <CircleIcon style={{ color: "green" }} fontSize="small" />
                    ) : (
                      <RadioButtonUncheckedIcon
                        style={{ color: "grey" }}
                        fontSize="small"
                      />
                    )}
                  </ListItemIcon>
                  <IconButton
                    aria-label="more"
                    id="long-button"
                    aria-controls={open ? "long-menu" : undefined}
                    aria-expanded={open ? "true" : undefined}
                    aria-haspopup="true"
                    onClick={handleClick}
                  >
                    <MoreVertIcon />
                  </IconButton>
                  <Menu
                    id="long-menu"
                    MenuListProps={{
                      "aria-labelledby": "long-button"
                    }}
                    anchorEl={anchorEl}
                    open={open}
                    onClose={handleClose}
                  >
                    {isAdmin && [
                      <MenuItem onClick={handleClose}>
                        <Typography>Make admin</Typography>
                      </MenuItem>,
                      <MenuItem onClick={handleClose}>
                        <Typography>Mute</Typography>
                      </MenuItem>,
                      <MenuItem onClick={handleClose}>
                        <Typography>Kick</Typography>
                      </MenuItem>,
                      <MenuItem onClick={() => handleBan(user)}>
                        <Typography>Ban</Typography>
                      </MenuItem>
                    ]}
                    <MenuItem onClick={handleClose}>
                      <Typography>View profile</Typography>
                    </MenuItem>
                    <MenuItem onClick={handleClose}>
                      <Typography>Invite to play</Typography>
                    </MenuItem>
                  </Menu>
                </ListItem>
                <hr />
              </Fragment>
            );
          })}
        </List>
      </Drawer>
    </>
  );
};