Início / user-14479111

Gyan Prakash's questions

Martin Hope
Gyan Prakash
Asked: 2025-04-06 02:24:36 +0800 CST
  • 5

Tenho um componente React que obtém alguns dados do backend e mostra o resultado em um gráfico de pizza.


function SiteInfo() {

    const [url, setUrl] = React.useState('Loading...')
    const [title, setTitle] = React.useState('Loading...')
    const [uptime, setUptime] = React.useState(0)
    const [uptimeData, setUptimeData] = React.useState([])
    const [online, setOnline] = React.useState(false)
    const [latency, setLatency] = React.useState(-1)

    const [searchParams, _] = useSearchParams()
    const siteid = searchParams.get('siteid')

    React.useEffect(() => {
        (async () => {
            const response = await fetch(`http://localhost:3000/siteinfo/${siteid}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
                }
            })
            const siteinfo = await response.json()
            const sitedata = siteinfo.sitedata
            console.log(sitedata.uptimeData)
            setUrl(sitedata.site)
            setTitle(sitedata.title)
            setUptime(sitedata.uptime)
            setUptimeData(sitedata.uptimeData)
            setOnline(sitedata.uptimeData.at(-1).up)
            setLatency(sitedata.uptimeData.at(-1).latency)
        })()
    }, [siteid])
    
    return (
        // ...
                <div>
                    <PieChart width={500} height={300} >
                        <Pie
                            cx='50%'
                            cy='50%'
                            data={[
                                {
                                    name: 'Up',
                                    value: uptime,
                                    fill: '#3CFF60',
                                    stroke: '#29D849',
                                },
                                {
                                    name: 'Down',
                                    value: 100 - uptime,
                                    fill: '#FA8080',
                                    stroke: '#F82D2D',
                                }
                            ]}
                            dataKey='value'
                        >
                        <LabelList dataKey='name' position='outside' />
                        </Pie>
                        <Tooltip />
                    </PieChart>
                </div>
         // ...
    )
}

Há uma animação associada ao gráfico de pizza que aparece normalmente quando eu removo a linha setUptimeData(sitedata.uptimeData), mas quando a linha está presente, a animação não é reproduzida. Embora uptimeDatanão esteja relacionada ao gráfico de pizza de forma alguma.

Uma coisa a ser notada é que o campo sitedata.uptimeDataé um grande array de objetos (quase 20 elementos), talvez esteja demorando muito para definir o estado e redefinir a animação no meio do caminho. No entanto, não consigo encontrar uma maneira de confirmar isso ou uma maneira alternativa de definir o estado.

Estou usando recharts para o gráfico de pizza.

Qualquer ajuda será muito apreciada.

javascript