因此，我映射了一组用户，每个用户都有一个唯一的 ID。我想为链接创建一个路径，其中包含用户的唯一 ID，具体取决于单击的链接。这是我到目前为止所尝试过的（由于某种原因，链接不允许我使用模板文字）
import React, {useEffect, useState} from 'react';
//import {axiosWithAuth} from '../api/axiosWithAuth';
//import axios from 'axios';
import {connect} from 'react-redux';
import {useParams, Link} from 'react-router-dom';
import {fetchUsers} from '../actions/index';
//get request to /api/users -- will return array of users
const ListUsers = props =>{
const [data, setData] = useState([{username:'hello world!'}]);
const params = useParams();
const path = `/Profile/${params.id}`
// function myFunction(id) {
// alert(item.id);
// }
useEffect(() => {
props.fetchUsers();
}, [])
return(
<div>
{props.users.map(item=>{return(
<Link path='/Profile' params={{id: item.id}}> …我在 MenuItem（也从 MaterialUI 导入）内有一个 Popover（从 MaterialUI 导入）。我将弹出框的 open 属性设置为anchorEl 的布尔值。onClose 是处理anchorEl 的，如果我在弹出窗口之外单击，它应该将anchorEl 设置为null。然而，情况并非如此。一旦给了 DOMelement 的值，anchorEl 就永远不会被设置为 null，而且我不确定我在这里做错了什么。
这是我的代码中对于这个问题很重要的部分
//state for the anchorEl (also handles the open/close for the popover)
const [usernamePopoverAnchorEl, setUsernamePopoverAnchorEl] = React.useState<null | HTMLElement>(null);
//handle popover open/close
const handleUsernamePopoverClick = (e: any) => {
setUsernamePopoverAnchorEl(e.currentTarget);
}
const usernamePopoverOpen = Boolean(usernamePopoverAnchorEl);
const popoverHandleClose = () => {
setUsernamePopoverAnchorEl(null);
console.log(usernamePopoverAnchorEl);
}
//menuItems with the popovers that don't close
<MenuItem onClick={handleUsernamePopoverClick}>
<span>
<p>Change username</p>
</span>
<Popover open={usernamePopoverOpen} anchorEl={usernamePopoverAnchorEl} onClose={popoverHandleClose}>
<p>Testing helloooo!</p> …