javascript - TradingView React 组件中的图表更新不起作用

Question

图表符号在另一个组件中被选择，状态更新作为 Prop 传回此 TradingView 组件。
我正在尝试使用以下方法更改图表中的符号:

this.tvWidget.chart().setSymbol('BINANCE:' + this.props.selectedSymbol.name)

但是我应该在哪里以及如何准确地放置和使用它？我很迷惑。
我需要更改图表符号，但应该以什么方式发生？
谢谢!

import * as React from 'react';
import './index.css';
import {widget} from '../../charting_library/charting_library.min';
import {setSymbol} from "../../store/actions/symbols";
import {connect} from "react-redux";

class TradingView extends React.PureComponent {
    tvWidget = null;
    widgetOptions = {
        client_id: 'tradingview.com',
        user_id: 'public_user_id',
        datafeed: new window.Datafeeds.UDFCompatibleDatafeed('https://demo_feed.tradingview.com'),
        charts_storage_url: 'https://saveload.tradingview.com',
        symbol: "AAPL",
        symbol: this.props.selectedSymbol ? this.props.selectedSymbol.name : "BTCUSDT",
        snapshot_url: "https://www.tradingview.com/snapshot/",
        enabled_features: ['study_templates'],
        studies: ["RSI@tv-basicstudies", "StochasticRSI@tv-basicstudies", "MACD@tv-basicstudies"],
        watchlist: ["BINANCE:BTCUSDT"],
        disabled_features: ['use_localstorage_for_settings'],
        library_path: '/charting_library/',
        charts_storage_api_version: '1.1',
        container_id: 'tv_chart_container',
        debug: false,
        interval: 'D',
        theme: "Dark",
        allow_symbol_change: true,
        auto_save_delay: '5',
        range: "6m",
        hide_legend: true,
        locale: "en",
        timezone: "Europe/Berlin",
        autosize: true,
        enable_publishing: true,
    };
    componentDidMount() {
        this.tvWidget = new widget(this.widgetOptions);
        let tvWidget = this.tvWidget

        tvWidget.onChartReady(() => {
            tvWidget.headerReady().then(() => {
                let chart = tvWidget.chart();
                chart.onSymbolChanged().subscribe(null, onChartSymbolChanged);
            })
        })

        let setSymbol = this.props.setSymbol
        let symbols = this.props.symbols

        function onChartSymbolChanged() {
            let chart = tvWidget.chart();
            console.log("onChartSymbolChanged changing symbol to " + chart.symbol());
            setSymbol(symbol)         
        }
    }

    componentWillUnmount() {
        if (this.tvWidget !== null) {
            this.tvWidget.remove();
            this.tvWidget = null;
        }
    }

    render() {

        this.tvWidget && this.tvWidget.symbol ? this.tvWidget.chart().setSymbol('BINANCE:' + this.props.selectedSymbol.name) : null

        return (
            <div
                id="tv_chart_container"
                className={'TVChartContainer'}
            />
        );
    }
}

const mapStateToProps = state => {
    return {
        symbols: state.symbols.symbols,
        selectedSymbol: state.symbols.selectedSymbol
    };
};

const mapDispatchToProps = {setSymbol}
export default connect(mapStateToProps, mapDispatchToProps)(TradingView);

Answer 1

您可以通过在 componentDidUpdate(prevProps) {} 中传递 prevPops 来检查 Prop 并检查更改。