如何解决createChart 正在渲染 2 个画布
反应组件:
import { useRef,useEffect,useState } from 'react';
import { createChart } from 'lightweight-charts';
import { formatData } from './helpers/formatData';
import axios from 'axios';
import './App.css';
const App = () => {
const [data,setData] = useState();
const [loading,setLoading] = useState(true);
const chartRef = useRef();
useEffect(() => {
console.log('render');
getData();
},[]);
const getData = async () => {
setLoading(true);
await axios
.get(
'https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=7'
)
.then(res => setData(formatData(res.data.prices)));
setLoading(false);
};
if (!loading) {
const chart = createChart(chartRef.current,{ width: 400,height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData(data);
}
return (
<div className="container">
<div ref={chartRef} className="chart"></div>
</div>
);
};
export default App;
格式数据函数:
export const formatData = response => {
return response.map(el => ({
time: el[0],value: el[1]
}));
};
每当我保存文档时,它都会使屏幕上的画布数量增加一倍。如果我重新加载,它会回到 2。在 google 上真的找不到任何信息。任何帮助将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。