onClick（）事件对一个div有效，但对另一个div无效。为什么？

Question

使用React，我有一个包含信息的div，其中另一个div包含项目列表。我希望第二个div（列表）可以在单击时折叠。如果我将click listener放在第一个div中，它将工作并显示项目列表。问题是它显示了所有项目的所有列表。我只希望单击项目的列表可见：

render() {
        return (
            this.state.data.map(item => {
                return (  // If I put onClick={this.showCollapsible} here, all lists are loaded
                    <div id={'imageTableItemComponent'} key={item.imageName}>
                        {item.imageName} -
                        {item.tags.length}
                        <div id={'collapsibleTagList'} key={item.tags} onClick={this.showCollapsible}>
                               // *** This onClick does not get triggered ***
                            {this.state.collapsible && <TagTableComponent data={item} onClose={() => this.hideCollapsible()}/>}
                        </div> 
                    </div>
                )
            })

        )
    }

如果我在this.showcollapsable（）之后添加括号，我会收到以下警告：

警告：在现有状态转换期间（例如在渲染中）无法更新。渲染方法应该是道具和状态的纯函数。

以下是ShowCollapsable函数：

showCollapsible = () => {
        this.setState( {collapsible: true})
    }

我的列表应该是这样的：

• 图1

当onClick侦听器位于第一个div中时，所有列表都是这样打开的：

• 图1-项目1、项目2




Answer 1

所以我改变了一些事情。首先，当我问这个问题时，我的构造函数看起来像这样：

constructor(props) {
        super(props);
        this.state = {
            data : [],
            collapsible : false,
        }
    }

我已将可折叠更改为null，collapsable:null，并将我的showcollapsable函数更改为如下所示：

showCollapsible = (imageName) => {
        this.setState( {collapsible: imageName})
    }

最后，我在第一个div中调用单击监听器，就像这样：

 render() {
        return (
            this.state.data.map(item => {
                return (
                    <div id={'imageTableItemComponent'} key={item.imageName} onClick={() => this.showCollapsible(item.imageName)}> <!-- This looks fancy, eh? -->
                        {item.imageName} -
                        {item.tags.length}
                        <div id={'collapsibleTagList'} key={item.tags}>
                            {this.state.collapsible === item.imageName && <TagTableComponent data={item} onClose={this.hideCollapsible}/>}
                        </div>
                    </div>
                )
            })

        )
    }

对于将来可能遇到此问题的任何人，不要像我第一次做的那样XD

通过将collapsable设置为true，它改变了整个类的状态，所以我在哪里改变状态并不重要。这样，仅更改具有正确imageName的项的状态。