reactjs 错误:我得到一个项目没有找到错误,“chart.render()“

omqzjyyz  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(182)

“我得到错误:未找到元素错误。“chart.render()“删除了问号,它得到了修复,但当我删除它后刷新页面时,它仍然给出相同的错误,然后当我把问号它的工作。它会不时地给出窗口未找到错误。“

import React, { useEffect, useState, FC, useMemo } from"react";
import ApexCharts from 'apexcharts'
import Head from 'next/head'
import styles from '../../../../styles/Home.module.css'
import CurrencyFormat from 'react-currency-format';
import Image from "next/image";

    function App() {
        const [i, setSeti] = useState();
        const [countries, setCountries] = useState();

        useEffect(() => {
            fetch(
                "https://api.reservoir.tools/collections/daily-volumes/v1?id=0xed5af388653567af2f388e6224dc7c4b3241c544&limit=10"
            )
                .then((response) => response.json())
                .then((response) => setSeti(response));
        }, []);

        const SaleCountt = []
        const Datess = []
        const Floorr = []
        const DailyWorthh = []
        const DailyNetWorthh = []



        var si = i?.collections;


        si?.map(function (item) {
            SaleCountt.push(Math.round(item.sales_count));
            var date = new Date(item.timestamp * 1000).toLocaleDateString("en-US");
            Datess.push(date)
            Floorr.push((item.floor_sell_value).toFixed(1))
            DailyWorthh.push(item.sales_count)
            DailyNetWorthh.push(item.sales_count) 

        })

        const Dates = Datess.reverse();
        const SaleCount = SaleCountt.reverse();

        var options = {
            chart: {
                type: 'bar',
                height: 350

            },
            colors: ["#2E268D"],

            title: {
                text: 'Sale Count',
                align: 'left'
            },
            series: [
                {

                    name: 'sales',
                    data: SaleCount,

                }
            ],
            xaxis: {
                type: 'datetime',

                categories: Dates
            }
        }

“此处的chart.render()给出错误”

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

return (

    < div className={styles.Apps} >

        <div className={styles.StatusTitles}>Apbo detailed analytics</div>

        <div className={styles.StatusBox} >
            <div className={styles.StatusBoxItemm}>
                {/* <span className={styles.StatusBoxItemmTitlee}>APBO Nft Sales Chart</span> */}
                <div id="chart" className={styles.chartt}></div>
            </div>

        </div>
az31mfrm

az31mfrm1#

var chartOrigin = document.querySelector('#chart');
if(chartOrigin) {
    var chart = new ApexCharts(document.querySelector('#chart'), options);
    chart.render();
}

它发生在文件。querySelector('# chart')不存在。如果你想防止错误,请使用下面的代码。

相关问题