子组件中的 onClick 操作发送错误的元素答案

【问题标题】：onClick action in child component is sending wrong element子组件中的 onClick 操作发送错误的元素
【发布时间】：2019-10-24 07:05:46
【问题描述】：

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

现在在每个按钮的 OnClick 事件上，我调用一个函数，该函数使用选中的选项卡（“简单”、“中”或“硬”）更新子组件的状态，类似于 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>

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

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

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

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

【问题讨论】：

您介意在 CodePen 或 CodeSandbox 中提供一些伪代码吗？
好的，我一会儿再说。
甜蜜！.. 谢谢
@MattOestreich 我试图在 CodeSandbox 上复制我的问题，但看起来 materalize 导致了跨域问题codesandbox.io/s/boz91?fontsize=14 这是链接
很高兴你能把它修好！感谢更新

标签： javascript reactjs components render react-props

【解决方案1】：

好的，我修好了，实际上每个可折叠的都需要一个唯一的ID，所以我只是把name作为可折叠的ID。

总而言之，我们可以推断出每个功能（元素）子组件必须有一个唯一的 id 来识别它们，以便任何功能来识别它们。

【讨论】：