Javascript 每次更改组件的状态时，图表都会再次绘制

问题是当我点击按钮使用方法changeState，state changes，MoreInfo组件显示时，但图表又是这样绘制的：

这是我的密码

从“React”导入React
导入“./Home.css”
从“../Graph/Graph”导入图形
从“../MoreInfo/MoreInfo”导入MoreInfo；
导出默认类Home扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
showMoreInfo:false
};
}
changeState=（）=>{
这是我的国家({
showMoreInfo:！this.state.showMoreInfo
});
}
render（）{
返回(
{this.state.showMoreInfo&&}
)
}
}

图形组件代码

从“React”导入React
导入“./Graph.css”
从“轻量级图表”导入{createChart}
从“../../images/addToObserved.svg”导入addToObserved
函数图（props）{
const myRef=React.useRef（）；
React.useffect（（）=>{
getData（props.symbol，9，myRef）；
});
返回(
更多信息
添加到观察到的
);
}
函数getData（符号、月份、myRef）{
让数据=[{time:'2020-10-14'，值：140}]；
let to=新日期（）；
let from=新日期（）；
from.setMonth（from.getMonth（）-月）；
请求(`https://finnhub.io/api/v1/stock/candle` +
`？symbol=${symbol}`+
`&分辨率=D`+
`&from=${Math.round（from.getTime（）/1000）}`+
`&to=${Math.round（to.getTime（）/1000）}`+
`&令牌=***`，
{json:true}，
功能（错误、响应、正文）{
如果（错误）{
console.log（错误）；
返回；
}
让日期=从；
body['o'].forEach（（元素）=>{
date.setDate（date.getDate（）+1）；
push（{time:getFormattedDate（date），value:element}）；
});
data.shift（）；
makeChart（符号、数据、myRef）；
});
}
函数生成图（标题、数据、myRef）{
宽度=550；
设高度=300；
让chart=window.tvchart=createChart（myRef.current{
宽度：宽度，
高度:高度,，
});
let series=chart.addAreaSeries（）；
系列。设置数据（数据）；
}
导出默认图形；

---

即使没有MoreInfo组件，我也已经检查过了。若我只是改变父组件的状态，那个么图形会再绘制一次。若我再按一下按钮，它会画第三次等等。如果我显示了很多图表，那么每次单击按钮时，所有图表都会再绘制一次。

正如@SureshKumar所说，问题是每次在

getData（）

中获取数据时，我都会创建新的图表。我通过向每个图表传递id并将其保存在地图中来修复它，如下所示：

<Graph
    id={1}symbol='GOOGL'
    changeShowMoreInfoState={this.changeShowMoreInfoState} />

---

正如@SureshKumar所说，问题在于每次在

getData（）

中获取数据时，我都会创建新的图表。我通过向每个图表传递id并将其保存在地图中来修复它，如下所示：

<Graph
    id={1}symbol='GOOGL'
    changeShowMoreInfoState={this.changeShowMoreInfoState} />

---

您可以共享

组件的代码吗？我想问题出在

图形
组件上。@SureshKumar当然，每次你调用
getData（）
你在
makeChart（）
上创建另一个图表时，我都会编辑这个问题，可能会将该函数更改为只设置新数据，而不是在那里创建图形。你能共享
组件的代码吗？我想问题出在
图形
组件上。@SureshKumar当然，每次你调用
getData（）
你在
makeChart（）
上创建另一个图表时，我都会编辑这个问题，可能会将该函数更改为只设置新数据，而不是在那里创建图形。我有同样的问题，我也有同样的问题