Javascript 如何在不重新渲染整个组件的情况下切换Rechart线

我有一个从API查询数据并显示图表的组件，但是，由于切换状态为useEffect参数，因此打开和关闭行组件会触发另一个API调用

组成部分：

const Chart = (props) => {
  const [timeRange, setTimeRange] = useState({range: '1d', interval: '5m', long: '1 day'})
  const [chartData, setChartData] = useState({});
  const [chartIsLoading, setChartIsLoading] = useState(true);
  const [chartHasError, setChartHasError] = useState(false);
  const [displayLinearRegressionLine, setDisplayLinearRegressionLine] = useState(false);
  const [displaySMALine, setDisplaySMALine] = useState(false);

  const handleTimeRangeSelect = (event, newTimeRange) => {
    setTimeRange(newTimeRange)
  };
  
  useEffect(() => {
    getChartData(ticker, timeRange)
    .then(response => {
      setChartData(formatResponseForRechart(response))
      setChartIsLoading(false);
    })
    .catch((error) => {
      console.log(error)
      setChartHasError(true);
    });
  }, [ticker, timeRange, displayLinearRegressionLine, displaySMALine])

  return (
    <Container disableGutters maxWidth="med" className={classes.chartContainer}>
      <ResponsiveContainer width="98%" height={320}>
        <LineChart data={chartData.rechartData}  axisLine={false} >
          {displayLinearRegressionLine && <Line
            stroke="blue"
            data={chartData.linearRegressionValues}
            type="monotone"
            dataKey="lrValue"
            dot={false}
          />}
          {displaySMALine && <Line
            stroke="pink"
            data={chartData.SMAvalues}
            type="monotone"
            dataKey="runningAveragePrice"
            dot={false}
          />}
        </LineChart>
      </ResponsiveContainer>
      
      <ToggleButton
        value="check"
        displayLinearRegressionLine={displayLinearRegressionLine}
        onChange={() => {
          setDisplayLinearRegressionLine(!displayLinearRegressionLine);
        }}
      >
        Display Linear Regression Line
      </ToggleButton>
      <ToggleButton
        value="check"
        displayLinearRegressionLine={displayLinearRegressionLine}
        onChange={() => {
          setDisplaySMALine(!displaySMALine);
        }}
      >
        Display Simple Moving Average Line
      </ToggleButton>
    </Container>
  );
}

export default Chart;

const Chart=（道具）=>{
const[timeRange，setTimeRange]=useState（{range:'1d'，interval:'5m'，long:'1d'}）
const[chartData，setChartData]=useState（{}）；
const[chartIsLoading，setChartIsLoading]=使用状态（true）；
常量[chartHasError，setChartHasError]=useState（false）；
const[displayLinearRegressionLine，setDisplayLinearRegressionLine]=使用状态（false）；
const[displaySMALine，setDisplaySMALine]=useState（false）；
常量handleTimeRangeSelect=（事件，newTimeRange）=>{
设置时间范围（新时间范围）
};
useffect（（）=>{
getChartData（计时器、时间范围）
。然后（响应=>{
setChartData（formatResponseForRechart（响应））
setChartIsLoading（假）；
})
.catch（（错误）=>{
console.log（错误）
setChartHasError（真）；
});
}，[ticker，timeRange，displayLinearRegressionLine，DisplaysLine]）
返回(
{displayLinearRegressionLine&&}
{displaySMALine&&}
{
setDisplayLinearRegressionLine（！displayLinearRegressionLine）；
}}
>
显示线性回归线
{
setDisplaySMALine（！displaySMALine）；
}}
>
显示简单移动平均线
);
}
导出默认图表；

有没有一种方法可以在不触发另一个API调用的情况下切换行？ （某些代码不显示，以删除与问题无关的代码）