每次更改组件状态时图表都会重新绘制

Question

问题是当我单击按钮以使用方法 changeState 时，状态发生变化，MoreInfo 组件显示，但图表再次绘制如下：

这是我的代码

import React from 'react'
import './Home.css'
import Graph from '../graph/Graph'
import MoreInfo from '../moreInfo/MoreInfo';

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showMoreInfo: false
        };
    }

    changeState = () => {
        this.setState({
            showMoreInfo: !this.state.showMoreInfo
        });
    }

    render() {
        return (
            <div className='container'>
                <div className='more_info'>
                    {this.state.showMoreInfo && <MoreInfo />}
                </div>
                <div className='graphs'>
                    <Graph symbol='GOOGL' changeState={this.changeState} />
                </div>
            </div>
        )
    }
}

Graph组件代码

import React from 'react'
import './Graph.css'
import { createChart } from 'lightweight-charts'
import addToObserved from '../../images/addToObserved.svg'

function Graph(props) {
    const myRef = React.useRef();
    React.useEffect(() => {
        getData(props.symbol, 9, myRef);
    });

    return (
        <div className='graph-container'>
            <div ref={myRef} className='graph' />
            <button onClick={props.changeShowMoreInfoState}>More Info</button>
            <div className='addToObserved'>
                <button>
                    <p className='addToObserved-text'>Add to observed</p>
                    <img className='addToObserved-icon'
                        alt='observed_icon'
                        src={addToObserved} />
                </button>
            </div>
        </div>
    );
}

function getData(symbol, months, myRef) {
    let data = [{ time: '2020-10-14', value: 140 }];
    let to = new Date();
    let from = new Date();
    from.setMonth(from.getMonth() - months);
    request(`https://finnhub.io/api/v1/stock/candle` +
        `?symbol=${symbol}` +
        `&resolution=D` +
        `&from=${Math.round(from.getTime() / 1000)}` +
        `&to=${Math.round(to.getTime() / 1000)}` +
        `&token=***`,
        { json: true },
        function (error, response, body) {
            if (error) {
                console.log(error);
                return;
            }
            let date = from;
            body['o'].forEach((element) => {
                date.setDate(date.getDate() + 1);
                data.push({ time: getFormattedDate(date), value: element });
            });
            data.shift();
            makeChart(symbol, data, myRef);
        });
}

function makeChart(title, data, myRef) {
    let width = 550;
    let height = 300;
    let chart = window.tvchart = createChart(myRef.current, {
        width: width,
        height: height,
    });

    let series = chart.addAreaSeries();
    series.setData(data);
}

export default Graph;

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

Answer 1

正如@SureshKumar 所说，问题是我每次在 getData() 中获取数据时都会创建新图表。我通过将 id 传递给每个图表并将其保存在地图中来修复它，如下所示：

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

并将我的 makeChart() 方法更改为：

let listOfCharts = new Map();

function makeChart(id, title, data, myRef) {
    let width = 550;
    let height = 300;
    let chart = listOfCharts.get(id);
    if (chart === undefined) {
        chart = window.tvchart = createChart(myRef.current, {
            width: width,
            height: height,
            grid: {
                horzLines: {
                    visible: false,
                },
            },
        });
    } else {
        return;
    }
    ...
}

每次更改组件状态时图表都会重新绘制

Chart draws again every time I change the state of a component

javascript

reactjs

lightweight-charts