React Material UI中Accordion点击获取对应数据失败问题排查

核心问题：作用域不匹配 #

你遇到的item未定义，本质是事件处理函数的作用域和遍历records时的item作用域不重叠。举个典型的错误写法：

// 错误示例
const handleClick = (e) => {
  console.log(item.attributes.id); // 这里的item不在当前作用域内，直接报错
};

return (
  <div>
    {records.map(item => (
      <Accordion key={item.attributes.id} onClick={handleClick}>
        <AccordionSummary>{item.attributes.name}</AccordionSummary>
      </Accordion>
    ))}
  </div>
);

map回调里的item只在当前循环的回调函数内有效，外部的handleClick根本访问不到这个变量，自然会提示未定义。

两种可行的解决方案 #

方案1：在map回调中直接传递item给处理函数

这是最直观的解决方式，在遍历的时候把当前item作为参数传入点击事件：

// 正确写法：将item作为参数传入
const handleClick = (item) => {
  console.log(item.attributes.id); // 正常获取目标id
};

return (
  <div>
    {records.map(item => (
      <Accordion 
        key={item.attributes.id} 
        onClick={() => handleClick(item)} // 这里直接把当前item传进去
      >
        <AccordionSummary>{item.attributes.name}</AccordionSummary>
      </Accordion>
    ))}
  </div>
);

如果需要同时获取事件对象，也可以一起传递：

onClick={(e) => handleClick(e, item)}

// 对应的处理函数
const handleClick = (e, item) => {
  console.log(e.target, item.attributes.id);
};

方案2：通过DOM dataset存储id（适合不需要完整item的场景）

如果只需要id而不是整个item对象，可以把id存在Accordion的data-*属性中，再从事件对象中读取：

const handleClick = (e) => {
  const targetId = e.currentTarget.dataset.id; // 从dataset中获取id
  console.log(targetId);
  // 如果需要对应item，可以从records中查找：
  const targetItem = records.find(item => item.attributes.id === targetId);
};

return (
  <div>
    {records.map(item => (
      <Accordion 
        key={item.attributes.id} 
        onClick={handleClick}
        data-id={item.attributes.id} // 存储id到dataset
      >
        <AccordionSummary>{item.attributes.name}</AccordionSummary>
      </Accordion>
    ))}
  </div>
);

额外注意点 #

• 确保records中的每个item确实存在attributes.id字段，避免因数据本身缺失导致的报错；
• 遍历生成Accordion时，必须设置唯一的key值，用item.attributes.id是合理的选择，不要用数组索引作为key。

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