Next.js中TradingView组件导航后消失问题求助

问题根源 #

1. 导航返回时，TradingView脚本已加载完成，Next.js的Script组件onLoad事件不会再次触发，导致图表渲染函数未执行。
2. 图表容器缺少relative/fixed/absolute定位属性，触发控制台错误影响图表正常渲染。

修复步骤 #

1. 修复容器定位错误

在Charts.module.css中为TradingView容器添加定位样式：

.tv {
  position: relative;
  width: 100%;
  height: 100vh; /* 根据页面需求调整高度 */
}

2. 修改组件逻辑，确保每次挂载都渲染图表

更新Charts组件，使用useEffect在组件挂载时检查脚本状态并渲染图表，同时添加清理逻辑避免内存泄漏：

import Script from "next/script";
import styles from "./Charts.module.css";
import { renderChart } from "../utils/text";
import BarLoader from "react-spinners/BarLoader";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default function Charts() {
  const router = useRouter();
  const [widget, setWidget] = useState(null);

  useEffect(() => {
    let currentWidget;

    // 组件挂载时检查TradingView是否已加载
    if (window.TradingView) {
      currentWidget = renderChart();
      setWidget(currentWidget);
    }

    // 组件卸载时销毁图表实例
    return () => {
      if (currentWidget?.destroy) {
        currentWidget.destroy();
      }
    };
  }, []);

  return (
    <div className={styles.container}>
      <div className={`tradingview-widget-container ${styles.tv}`}>
        <div id="tradingview_70c8b">
          <Script
            src="https://s3.tradingview.com/tv.js"
            onLoad={() => {
              // 首次加载脚本时渲染图表
              if (!widget) {
                const newWidget = renderChart();
                setWidget(newWidget);
              }
            }}
          />
        </div>
      </div>
      <div className={styles.reload} onClick={() => router.reload()}>
        <BarLoader color="#00e99b" loading={true} />
        <h6>No data available for display...</h6>
        <p>Tap to refresh</p>
      </div>
    </div>
  );
}

3. 更新renderChart函数返回实例

修改utils/text.js中的renderChart，返回图表实例以便后续销毁：

export const renderChart = () => {
  return new TradingView.MediumWidget({
    "symbols": [
      ["Gold", "TVC:GOLD|1D"],
      ["Bitcoin", "BITSTAMP:BTCUSD|1D"],
      ["Tether", "CRYPTOCAP:USDT|1D"],
      ["Diamond", "BSE:DIAMOND|1D"],
      ["Oil", "SPARKS:OIL|1D"],
      ["USOIL", "TVC:USOIL|1D"],
      ["Google", "CAPITALCOM:GOOG|12M"],
      ["Apple", "NASDAQ:AAPL|12M"],
      ["Microsoft", "NASDAQ:MSFT|12M"]
    ],
    "chartOnly": false,
    "width": "100%",
    "height": "100%",
    "locale": "en",
    "colorTheme": "dark",
    "autosize": true,
    "showVolume": true,
    "hideDateRanges": false,
    "scalePosition": "right",
    "scaleMode": "Normal",
    "fontFamily": "trinidad_neue_blackregular",
    "noTimeScale": true,
    "valuesTracking": "5",
    "chartType": "line",
    "fontColor": "rgba(120, 123, 134, 0.57)",
    "gridLineColor": "rgba(240, 243, 250, 0.03)",
    "volumeUpColor": "rgba(34, 171, 148, 0.5)",
    "volumeDownColor": "rgba(247, 82, 95, 0.5)",
    "backgroundColor": "rgba(0, 0, 0, 1)",
    "container_id": "tradingview_70c8b"
  });
};

修复说明 #

• 容器定位修复解决了控制台的定位错误，确保图表渲染所需的布局环境。
• useEffect在组件每次挂载时主动检查TradingView脚本状态，避免依赖仅触发一次的onLoad事件。
• 销毁图表实例的清理逻辑防止了重复创建组件导致的内存泄漏和渲染冲突。

内容的提问来源于stack exchange，提问作者Brainstorm