React点击按钮显隐文本时onClick无法获取列表项问题修复

React中给元素绑定onClick事件时，如果直接写函数引用onClick={itemHandler}，事件触发时会默认把点击事件对象作为第一个参数传入处理函数，不会自动传入map遍历生成的当前列表项数据，这就是你控制台打印出入参是事件对象的核心原因。
另外你当前的点击处理逻辑存在缺陷：只要存储的ID不为null就直接把状态重置为null，会导致点击其他菜品时无法切换展示对应描述，不符合“同一时间仅展示一条描述”的需求。

• 修改事件绑定写法：用箭头函数包裹处理逻辑，主动将当前遍历到的item作为参数传入处理函数，写法为onClick={() => itemHandler(item)}
• 调整状态判断逻辑：点击时对比当前点击项的key和已存储的激活key，如果相等就将状态设为null（收起当前项），如果不相等就将状态设为当前项的key（切换展示当前项描述），保证同一时间最多只有一条描述处于展示状态。

import { useState } from 'react';

const items = [
  {
    name: 'Pizza',
    description: 'Cheese, bread, red sauce',
    price: '4.99',
    key: 0,
  },
  {
    name: 'Spaghetti',
    description: 'cooked noodles, red sauce, parmesan',
    price: '3.99',
    key: 1,
  },
  { name: 'Soda', description: 'pepsi products', price: '4.99', key: 2 },
];

const MenuItem = () => {
  const [activeKey, setActiveKey] = useState(null);

  const itemHandler = (item) => {
    setActiveKey(activeKey === item.key ? null : item.key);
  };

  return (
    <li className="items">
      {items.map((item) => {
        return (
          <ul key={item.key}>
            <button className="menu-item" onClick={() => itemHandler(item)}>
              {`${item.name}          ${item.price}`}
            </button>
            <h4
              className={`menu-description ${
                activeKey === item.key ? 'active-item' : 'none'
              }`}
            >
              {item.description}
            </h4>
          </ul>
        );
      })}
    </li>
  );
};

export default MenuItem;

注：示例中把原状态名ID改成了语义更明确的activeKey，如果需要保留原变量名直接替换即可，功能逻辑不受影响。

内容的提问来源于stack exchange，提问作者HarrySIV