Блог

Хороший день. Я добавил диаграмму в приложение SPA react. Диаграмма отображается на странице с использованием пользовательского эффекта. На графике также отображается линия порядка. На странице также есть ввод, и в зависимости от этого ввода строка заказа должна измениться. Однако, когда линия порядка будет нарисована, вся диаграмма будет отображаться как цель. Кроме того, когда я изменяю положение строки, я переношу данные на тот же вход, и все отображается таким же образом.

Как я могу исправить эту проблему и не перерисовывать диаграмму, а только линию порядка?

 export const TVChartContainer = ({
                   symbol= 'Binance:BTC/USDT',
                   interval= '1D',
                   containerId = 'tv_chart_container',
                   libraryPath = '/charting_library/',
                   chartsStorageUrl = 'https://saveload.tradingview.com',
                   chartsStorageApiVersion = '1.1',
                   clientId = 'tradingview.com',
                   userId = 'public_user_id',
                   fullscreen = false,
                   autosize = true,
                   studiesOverrides = {},
                   buyLine,
                   setBuyLine,
                 }) => {
  useEffect(() => {
    const widgetOptions = {
      debug: false,
      symbol: symbol,
      datafeed: Datafeed,
      interval: interval,
      container_id: containerId,
      library_path: libraryPath,
      locale: getLanguageFromURL() || 'en',
      disabled_features: ['use_localstorage_for_settings'],
      enabled_features: ['study_templates'],
      charts_storage_url: chartsStorageUrl,
      charts_storage_api_version: chartsStorageApiVersion,
      client_id: clientId,
      user_id: userId,
      fullscreen: fullscreen,
      autosize: autosize,
      studies_overrides: studiesOverrides,
    };
    const tvWidget = new widget(widgetOptions);

    tvWidget.onChartReady(() => {
      const order = tvWidget.chart().createOrderLine()
        .setText("Buy Line")
        .onMove(function () {
          setBuyLine(order.getPrice().toFixed(2));
        })
        .setLineLength(30)
        .setLineStyle(2)
        .setPrice(buyLine)
        .setLineColor('blue')
        .setQuantity(buyLine);
    })
  }, [symbol, buyLine]);
  return (
    <div
      id={containerId}
      className={'TVChartContainer'}
    />
  );
};
 

Вы устанавливаете buyLine эффект использования и используете его как зависимость, поэтому он застрянет в бесконечном цикле. Удалите эту зависимость.