Javascript 如何显示/隐藏已获取数组的React元素

我想根据

onClickShowChart

state属性显示/隐藏JSX的一部分，并根据ID输出正确的图表数据

但这部分在映射循环中，当我单击show元素时，它将根据ID获取数据，然后返回数组并显示图表

挑战：
问题是每次单击以显示图表时，每个映射项都会显示相同的图表数据，因为它取决于相同的状态属性。我无法设置单个状态，因为它正在使用

array.map（）

函数循环所有记录

如何单独显示/隐藏正确的图表数据而不产生影响，并保留其他记录状态和图表数据

构造函数（道具）{
超级（道具）；
//初始状态
this.state={dataList[]，showChart:false，showChartData:[]
}
组件willmount（）{
这是。_getDataList（）
}
_getDataList（）{
axios.get（`…/List`，
{
参数：{id:id}，
标头：{“授权”：…accessToken}
})。然后（（res）=>{
this.setState（{dataList:res.data}）
})
})
onClickShowChart=（id）=>{
this.setState（{showChart:true}，（）=>this.\u getGraphData（id））
}
//单击显示时，它将获取图形数据，然后传递到状态
_getGraphData（id）{
获取（`…/productAdsStatistic`，
{
参数：{id:id}，
标头：{“授权”：…accessToken}
})。然后（（res）=>{
this.setState（{graphData:res.data}）
})
})
renderChart（）{
返回(
// ...
)
}
render（）{
返回(
{this.state.dataList.map（（v）=>{
{v.title}
此.onclick显示图表（v._id）}>
单击以显示图表
{this.state.showChart==true？renderChart（）：'''}
}
}
}

来自API的JSON数组结果

[
{
_id:C1，
标题：图表A
},
{
_id:C2，
标题：图表B
}
]

1图表API的图形数据JSON数组结果

[
{
月份：“一月”，
价值：7
},
{
月份：“二月”，
价值：6.9
}
]

下面是沙盒链接：

上述解决方案的类版本：

---

扩展了我在评论中提到的想法：只需保留一个单独的状态变量，它将在单击的dataList中存储项的索引。renderChart应该接受一个与rowIndex相对应的参数。在renderChart函数中，检查rowIndex是否存在于上述状态索引数组中，如果存在，则呈现chart，else null。

只需保存一个单独的状态变量，该变量将存储单击的数据列表中项目的索引。renderChart应接受一个与rowIndex相对应的参数。在renderChart函数中，比较rowIndex和上述状态变量，如果匹配，则呈现图表，否则为null。是否同时显示一个图表时间？或者它会在您单击时显示，然后即使单击不同的项目也会保持该项目显示？它会保持该项目显示，即使单击不同的项目也会保持该项目显示当我单击以显示图表时，它会触发_getGraphData（）函数从图表API获取新的数据集。您可以将属性传递给图表组件dataList中单击项的id，然后该id将帮助您在_getGraphData函数中获取特定图表数据。我已相应地编辑了答案，请现在检查。如果我单击以显示图表，它将保持该项显示，即使单击dif其他选项，但也可以隐藏特定选项，如切换以显示/隐藏该项。@android1751我已添加切换行为，您现在可以检查了。