समस्या यह है कि जब मैं विधि परिवर्तन स्थिति, राज्य परिवर्तन, 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>
        )
    }
}

ग्राफ घटक का कोड

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 घटक के बिना भी पहले ही जाँच कर ली है। अगर मैं सिर्फ मूल घटक की स्थिति बदलता हूं, तो ग्राफ एक और बार खींचता है। अगर मैं फिर से बटन पर क्लिक करता हूं, तो यह तीसरी बार और भी बहुत कुछ खींचता है। यदि मैं बहुत सारे चार्ट प्रदर्शित करता हूं, तो वे सभी हर बटन पर एक बार और क्लिक करते हैं।

1
DenBondd 27 अक्टूबर 2020, 11:13

1 उत्तर

सबसे बढ़िया उत्तर

जैसा कि @सुरेश कुमार ने कहा, समस्या यह थी कि जब भी मुझे getData() में डेटा मिलता है तो मैं हर बार नया चार्ट बनाता हूं। मैंने इसे प्रत्येक चार्ट में आईडी पास करके तय किया और इसे इस तरह से मानचित्र में सहेजा:

<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;
    }
    ...
}
0
DenBondd 27 अक्टूबर 2020, 20:08