您可以创建一个状态变量来跟踪当前选择/单击的项，然后检查它是否与当前Map项匹配。

const [selected, setSelected] = useState("");

字符串
//剩余代码

{NavbarInfo.map((item) => {
                    return (
                        <div className='navOptions flex justify-center items-center py-0'>
                            <NavLink key={item.id} to={item.link} id={item.id} className='flex flex-row-reverse'
                             onClick={()=>{setSelected(item.name);handleNavSelect();handleDropdown(item)}}>
                                {showAccountsDropdown && selected === item.name? <h1>More info</h1>: null }
                                {item.name}
                                <span className='mt-1 mx-1'>{item.icon}</span>
                            </NavLink>
                        </div>
                    )
                })}

型
PS：当在循环上使用事件监听器时，如onClick here，不要将循环项作为参数传递给事件监听器。

问题

1.代码使用相同的单个showAccountsDropdown状态来控制每个项目的“否”，showAccountsDropdown将同时为所有项目的true或false。

const [showAccountsDropdown, setShowAccountsDropdown] = useState(false)

...

{NavbarInfo.map((item) => {
  return (
    <div className="navOptions flex justify-center items-center py-0">
      <NavLink ... >
        {showAccountsDropdown ? <h1>More info</h1> : null}
        ...
      </NavLink>
    </div>
  );
})}

字符串

1. NavLink组件的onClick处理程序将click事件传递给handleDropdown回调。

const handleDropdown = (item) => { // <-- item is click event
  (item.name === "Profile") {   // <-- never true
    setShowAccountsDropdown(!showAccountsDropdown);
  }
};

...

{NavbarInfo.map((item) => {
  return (
    <div className="navOptions flex justify-center items-center py-0">
      <NavLink
        ...
        onClick={(item) => {    // <-- click event
          handleNavSelect();
          handleDropdown(item); // <-- click event passed through
        }}
      >
        ...
      </NavLink>
    </div>
  );
})}

型
1.可能是复制/粘贴错误/打字错误，但在您的示例中有一个额外的关闭div标记，并且handleDropdown缺少if语句。

解决方案

我建议作以下更新：
1.使用showAccountsDropdown状态保存活动item.name值。
1.更新handleDropdown以在null和item.name之间切换setShowAccountsDropdown。
1.在Map导航项时，检查setShowAccountsDropdown是否等于当前item.name，以有条件地呈现“”。修复单击事件问题。
代码：

function Navbar() {
  const [navShow, setNavShow] = useState(false);

  // Initially null, e.g. no active item
  const [showAccountsDropdown, setShowAccountsDropdown] = useState(null);

  const handleDropdown = (item) => {
    // If item.name is already in state, set back to null to deselect
    // otherwise set to new item.name
    setShowAccountsDropdown((show) => (show === item.name ? null : item.name));
  };

  const handleNavSelect = () => {
    setNavShow(show => !show);
  };

  return (
    <div className="navbarContainer ">
      {NavbarInfo.map((item) => {
        return (
          <div className="navOptions flex justify-center items-center py-0">
            <NavLink
              key={item.id}
              to={item.link}
              id={item.id}
              className="flex flex-row-reverse"
              onClick={() => {
                handleNavSelect();
                handleDropdown(item); // <-- pass current mapped item
              }}
            >
              {/* Check if current item is the "active" one */}
              {showAccountsDropdown === item.name ? <h1>More info</h1> : null}
              {item.name}
              <span className="mt-1 mx-1">{item.icon}</span>
            </NavLink>
          </div>
        );
      })}
    </div>
  );
}

型
x1c 0d1x的数据