1

问题是当我单击按钮以使用方法 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 组件，我也已经检查过了。如果我只是改变父组件的状态，图形会再绘制一次。如果我再次单击按钮，它会绘制第三次等等。如果我显示很多图表，那么每单击一次按钮，它们都会再绘制一次。

4

1 回答 1

0

正如@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;
    }
    ...
}
于 2020-10-27T17:08:34.677 回答