关于javascript：子组件中的onClick操作发送了错误的元素

onClick action in child component is sending wrong element

我正在尝试使用MateralizeCss渲染一些包含可折叠对象的子组件，并且在每个可折叠对象内部都存在三个选项卡，并且在每个选项卡上都有一个按钮，每个可折叠标题都分配有一个我要通过的名称道具。

现在每个按钮的OnClick事件发生时，我调用一个函数，该函数使用选定的选项卡("简单"，"中"或"硬")更新子组件的状态，类似于this.setState({active: this.button.parentname})并返回该名称可折叠为父级的名称，但是问题是返回的名称不是正确的名称，它是第一个呈现的第一个孩子的名称。

要了解这一点，假设我在我的父组件中有状态。

1
2
3
4
5
6

{category: [

{"name": 1, .. some other properties}, // data of first collapsible
{"name": 2, .. some other properties}, // second

]}

最初，状态为空，但后来异步填充了类别，但我已经处理了。

所以我这样渲染它，

1
2
3
4
5
6

<ul className="collapsible">
{this.state.category.length > 0 ? (this.state.category.map(((category, key) => (
<CategoryCollapsible key={key} category={category} get_name={this.get_name} />
)))) : null}

</ul>

在子组件方面，我只有
<MMKG1>
标记，其中可折叠标题的名称为this.props.category.name。

在主体中，我只有上面带有带有onClick的按钮的选项卡，如我上面定义的，即返回可折叠标题的名称。

那么，这可能是什么原因？
为什么在两个渲染的子组件之间混淆了React？

我还使用ComponentDidMount()检查了道具，并且道具正确无误，但是一旦发生onClick事件，道具就变成了第一个吗？
这是什么法术？
有任何猜测吗？