映射迭代中只有第一个react组件在工作

Question

我有一个组件，它显示一个图标，当单击该图标时，它会显示一个菜单。该组件被放置在html表中每行的第一列中(使用映射遍历项数组来创建表(。我遇到的问题是，只有表第一行的组件在单击时显示菜单。其他图标在单击时不起任何作用。

例如，如果tableItems是一个由3个对象组成的数组，当迭代生成一个有3行的表时，第一行的ActionMenu组件在单击时会显示一个菜单。然而，第二行和第三行的ActionMenu组件在单击它们时什么也不做。单击事件甚至不会触发。

我已经尝试过三次将ActionMenu组件放在表外的同一个页面中进行测试，它们都起作用了，所以这个问题似乎与放在表中的组件有关。我不确定为什么或者是否是因为它们是在创建表时在映射迭代中创建的。

如果有人能帮忙，我们将不胜感激。我已经包含了执行下面迭代的函数和菜单组件的代码。

const tableData = () => {
return tableItems.map((item: any, index) => {
const { id, value } = item;
return (
<div key={key} className="worklist-table-row">
<div className="worklist-table-cell icon">
<ActionsMenu items={[
{ id: "1", label: "menu choice 1"},
{ id: "2", label: "menu choice 2"}
]} />
</div>
...
other bits of code...
...
</div>
);
}
}

export default function ActionMenu(props: IContextMenu): JSX.Element {
const { items } = props;
const [showContextMenu, setShowContextMenu] = useState(false);
const renderItems = () => {
return items.map((item, index) => {
return (
<li key={index} className="context-menu-item">
{isDivider ? (
<hr />
) : (
item.label
)}
</li>);
});
};
return (
<div id={id}>
<Icon
title="Action"
icon="action"
classNames="icon-action"
onClick={() => {
setShowContextMenu(!showContextMenu);
}}
/>
<nav className={cn('context-menu', { 'show-context': showContextMenu })}>
<ul className="context-menu-group">{renderItems()}</ul>
</nav>
</div>
);
}

Answer 1

有几个未定义的值，如id和isDivider，需要定义。

将评估JSX中大括号内的代码。item.label已经在大括号中，所以不需要再次使用大括号。(已经对其进行了评估，以获得物品的标签属性。(

替换此：

{isDivider ? (
<hr />
) : (
{item.label}
)}

有了这个：

{isDivider ? (
<hr />
) : (
item.label
)}