Reactjs 使用react redux在循环中调用图形组件时如何处理图形数据

我通过从API获取数据并循环来显示图形。 现在我在每个图形组件中都有一个按钮。当我点击其中一个按钮时，只有图形数据需要更改，但我看到所有的图形都得到了更改，因为图形使用的是相同的还原器数据

在上面的图中，您可以看到，如果我们单击其中一个图中的week链接，那么只有图形数据需要更改，但两个图形数据都在更改

dashboard.js

{this.state.graphdata.map（（数据，i）=>{
返回(
)
})

电工

从“React”导入React，{Component，Fragment}；
从“react apexcharts”导入图表；
从“/LineGraph”导入线条图；
从“/BarGraph”导入条形图；
从“react redux”导入{connect}；
从“../../Actions”导入{dashboardGraphDays}；
类电扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选项混合图表1：{
图表：{
身高：300，
工具栏：{
节目：假
}
},
图例：{
位置：“顶部”，
字体大小：“26px”
},
数据标签：{
已启用：false
},
工具提示：{
followCursor:false，
x:{
节目：假
}
},
标签：[]，
xaxis：{
键入：“月”，
标题：{
文字：“小时”
},
标签：{
风格：{
fontSize:this.props.size，
cssClass：“apexcharts xaxis标签”
}
}
},
亚克斯：{
标题：{
文本：“Kwh”
}
}
},
系列：[]
};
}
componentDidMount（）{
this.setState（prevState=>({
…国家，
选项混合图表1：{
…prevState.options混合图表1，
标签：this.props.graphinfo.labels，
xaxis：{
…prevState.OptionMixedChart1.xaxis，
标题：{
…prevState.options混合图表1.xaxis.title，
text:this.props.graphinfo.xAxis.text
？this.props.graphinfo.xAxis.text
: ""
}
},
亚克斯：{
…prevState.OptionMixedChart1.yaxis，
标题：{
…prevState.options混合图表1.yaxis.title，
text:this.props.graphinfo.yAxis.text
？this.props.graphinfo.yAxis.text
: ""
}
}
},
系列：this.props.graphinfo.series，
标题：this.props.graphinfo.header？this.props.graphinfo.header:“”，
uidetailid:this.props.graphinfo.uidetailid
？this.props.graphinfo.uiDetailId
: "",
地点：this.props.location
}));
}
componentDidUpdate（PrevPros、PrevState）{
if（PrevPros.GraphDataSuccess！=this.props.GraphDataSuccess）{
这是我的国家(
prevState=>({
…国家，
选项混合图表1：{
…prevState.options混合图表1，
标签：this.props.GraphDataSuccess[0]。标签，
xaxis：{
…prevState.OptionMixedChart1.xaxis，
标题：{
…prevState.options混合图表1.xaxis.title，
text:this.props.GraphDataSuccess[0].xAxis.text
？this.props.GraphDataSuccess[0].xAxis.text
: ""
}
},
亚克斯：{
…prevState.OptionMixedChart1.yaxis，
标题：{
…prevState.options混合图表1.yaxis.title，
text:this.props.GraphDataSuccess[0].yAxis.text
？this.props.GraphDataSuccess[0].yAxis.text
: ""
}
}
},
系列：this.props.GraphDataSuccess[0]。系列
}),
console.log（this.state）
);
这是我的国家({
页眉：this.props.GraphDataSuccess[0]。页眉
？this.props.GraphDataSuccess[0]。标头
: "",
uidetailid:this.props.GraphDataSuccess[0]。uidetailid
？this.props.GraphDataSuccess[0].uiDetailId
: ""
});
}
}
changeColor=Selecteddaytype=>{
this.setState（{selectedtype:Selecteddaytype}）；
const consumptiontaginfo=consumptiondaytag（）；
consumptiontaginfo.propertyId=this.props.pidinfo；
consumptiontaginfo.interval=Selecteddaytype；
consumptiontaginfo.uiDetailId=this.state.uiDetailId；
consumptiontaginfo.labelName=this.state.location；
此.props.dashboardGraphDays（consumptiontaginfo）；
};
showhidegraph=数据=>{
数据==“ba