Question

我正在尝试使用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的按钮，即返回可折叠标题的名称。

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

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

Answer 1

好的，我修复了它，实际上每个可折叠对象都需要一个唯一的ID，因此我只将name作为可折叠对象的ID。

总而言之，我们可以推断出每个功能（元素）子组件必须具有唯一的ID才能标识它们，而任何功能都必须标识它们。

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

1 个答案: