Javascript 子组件中的onClick操作正在发送错误的元素

我正在尝试使用MaterializeCss渲染包含一些可折叠的子组件，在每个可折叠的选项卡中有三个选项卡，每个选项卡上都有一个按钮，并且每个可折叠的标题都指定了一个名称，我通过道具传递

现在，在每个按钮的OnClick事件中，我调用一个函数，该函数使用选中的选项卡（“easy”、“med”或hard）更新子组件的状态，类似于

this.setState（{active:this.button.parentname}）

并将可折叠组件的名称返回给父组件，但问题是返回的名称不正确，它是第一个呈现的第一个子项的名称

为了理解这一点，假设我在父组件中有状态，如

{category: [

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

]}

起初，状态是空的，但后来类别被异步填充，但我已经处理过了

所以我把它渲染成这样

<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>

{this.state.category.length>0？（this.state.category.map（（category，key）=>(
))))：null}

在子组件方面，我只有

标记，其中可折叠标题的名称是

this.props.category.name

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

那么，这可能是什么原因呢？ 为什么两个渲染子组件之间会混淆

我还使用

ComponentDidMount（）

检查了这些道具，这些道具是正确的，但是一旦onClick事件发生，道具就会被更改为第一个？ 这是什么魔法？

---

猜猜看？

好吧，我修正了它，实际上每个可折叠文件都需要一个唯一的ID，所以我把

名称作为可折叠文件的ID

最后，我们可以推断出，每个功能（元素）子组件都必须有一个唯一的id来标识它们，任何功能都必须标识它们
 你介意在CodePen或CodeSandbox中提供一些伪代码吗？好的，我马上把它放进去。太好了！。。Thanks@MattOestreich我试图在CodeSandbox上复制我的问题，但看起来Materialize导致了一个交叉起源的问题这里是链接很高兴你能够修复它！谢谢你的更新