Javascript React-onClick事件不触发设置状态

我正在尝试在React.js中创建一个图像库，到目前为止一切都进展顺利。
在库中，我正在创建缩略图对象-单击此按钮将启动“迷你库”，其中包含来自特定项目的所有图片和项目描述。然而，为了回到主图库，我正在“迷你图库”中创建带有附加处理程序的“关闭”按钮。
缩略图单击有效，但关闭按钮无效。请参阅下面随附的代码。
我将非常感谢您的帮助

这是主画廊：

从“React”导入React；
从“../components/Thumbnail”导入缩略图；
导出默认类图形扩展React.Component{
渲染（）{
const linkPrefix=“/life/”；
const imageS=“.800.jpg”；
const imageL=“.jpg”；
常数寿命=[
{
名称：“一”，
文件名：[
“救生圈1”，
],
描述：“一个”，
},
{
姓名：“两个”，
文件名：[
“救生圈2”，
“lifedrawing2ed”，
“救生圈2ED2”，
],
描述：“两个”，
},
{
姓名:"三",，
文件名：[
“救生圈3”，
],
描述：“三个”，
},
]
返回(
{lifePics.map(
（图一）=>
)}
);
}
}

您应该在构造函数中绑定单击处理程序，或者将其设置为箭头函数，以便传递上下文：

thumbnailClick = (event) => {
    this.setState({
        viewerDisplay: "visible",
    });
}

---

您应该将

event.stopPropagation（）

添加到

closeViewer

函数中，以防止单击事件传播到缩略图div元素

closeViewer(event) {
    event.stopPropagation();
    this.setState({
        viewerDisplay: "hidden",
    });
}

下面是一个没有停止播放的示例

测验
函数clickButton（）{
警报（“点击按钮”）；
}
函数clickDiv（）{
警报（“clickDiv”）；
}

我尝试了不同的方法。问题是，如果我将colsole.log（）语句添加到我的处理程序中，它会工作，但不会更改我的组件-缩略图的状态。@MaciekJarmula这很奇怪，请尝试为filename和index key之间的组合添加不同的键={

${I}{u${picture.filename}

}是否在closeViewer函数中添加了

控制台.log

？只是为了确保它进入内部，这太神奇了！谢谢你的帮助。所有的工作都像你建议的那样。