Javascript TradingView React组件中的图表更新不'；行不通

正在另一个组件中选择图表符号，状态更新作为道具传递回此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);

import*as React from'React'；
导入“./index.css”；
从“../../charting_library/charting_library.min”导入{widget}；
从“./../store/actions/symbols”导入{setSymbol}”；
从“react redux”导入{connect}；
类TradingView扩展了React.PureComponent{
tvWidget=null；
widgetOptions={
客户id:'tradingview.com'，
用户id:“公共用户id”，
datafeed:新窗口.datafeed.UDFCompatibileDataFeed（'https://demo_feed.tradingview.com'),
图表\u存储\u url:'https://saveload.tradingview.com',
符号：“AAPL”，
符号：this.props.selectedSymbol？this.props.selectedSymbol.name:“BTCUSDT”，
快照\u url:“https://www.tradingview.com/snapshot/",
已启用的_功能：[“研究_模板”]，
研究：[”RSI@tv-基础研究“，”StochasticRSI@tv-基础研究“，”MACD@tv-基本研究“]，
观察列表：[“二进制：BTCUSDT”]，
禁用的\u功能：[“使用\u本地存储\u进行\u设置”]，
库路径：'/charting\u library/'，
图表存储api版本：“1.1”，
容器id:“电视图表容器”，
调试：错误，
间隔：“D”，
主题：“黑暗”，
允许\u符号\u更改：true，
自动保存延迟：“5”，
射程：“6米”，
隐藏你的传说：真的，
地点：“恩”，
时区：“欧洲/柏林”，
自动调整大小：正确，
启用发布：true，
};
componentDidMount（）{
this.tvWidget=新小部件（this.widgetOptions）；
让tvWidget=this.tvWidget
tvWidget.onChartReady（（）=>{
tvWidget.headerReady（）。然后（（）=>{
让chart=tvWidget.chart（）；
chart.onSymbolChanged（）.subscribe（null，onChartSymbolChanged）；
})
})
设setSymbol=this.props.setSymbol
让符号=this.props.symbols
函数onChartSymbolChanged（）{
让chart=tvWidget.chart（）；
log（“onchartsymbol将符号更改为“+chart.symbol（））；
设置符号（symbol）
}
}
组件将卸载（）{
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
返回(
);
}
}
常量mapStateToProps=状态=>{
返回{
符号：state.symbols.symbols，
selectedSymbol:state.symbols.selectedSymbol
};
};
常量mapDispatchToProps={setSymbol}
导出默认连接（MapStateTrops、mapDispatchToProps）（TradingView）；

您可以通过在

componentDidUpdate（prevProps）{}

中传递prevPops来检查道具，并检查更改。

每当道具对发生更改时，我都会删除图表，从而使之起作用。我不知道这是不是最优化的方式

function TradingView(props) {
  const { pair } = props;
  const tv = useRef(null);

  useEffect(() => {
    if (tv.current) tv.current.remove();

    tv.current = new window.TradingView.widget({ symbol: pair });
  }, [pair]);

  return <div id="trading_view_chart" />;
}

功能交易视图（道具）{
常量{pair}=props；
const tv=useRef（空）；
useffect（（）=>{
如果（tv.current）tv.current.remove（）；
tv.current=newwindow.TradingView.widget（{symbol:pair}）；
}，[对]；
返回；
}

您解决过这个问题吗？我有完全相同的问题。