我在下一个应用程序中使用了tradingview小部件，它出现了一个小故障，如果我向外/向内导航，图表就会消失，但如果我

Question

这是tradingview图表的代码，脚本在页面加载时加载导入的tradingview函数，我添加了一个函数以编程方式重新加载面板。点击

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"
export default function Charts() {
const router = useRouter()
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={renderChart}/>
</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>
)}

这是我从utils导入的tradingview函数，只是为了保持代码整洁

export const renderChart = () => {
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"
})
}

每次组件安装时，我的控制台上都会出现这个错误

DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/content_scroll_mid_detection.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_check.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_detection.map: System error: net::ERR_BLOCKED_BY_CLIENT
6373.32ed9c17ad0037ce6878.js:5 2022-08-30T17:47:00.594Z:Chart.MiniChart:Container position property must be: relative, fixed, absolute

Answer 1

尝试使用图表的动态导入

https://tradingview-widgets.jorrinkievit.xyz/docs/Usage%20with%20Next.js