為什么useEffect在啟動時不渲染我的圖表？

我正在用 React 中的 ApexCharts 創建圖表。我都是新手，所以這可能很明顯：當我第一次加載網站或重新加載它時，我的圖表不會呈現。但是，當我更改 UseEffect 內部的某些內容時，它確實會呈現。

編輯：認為它可能與 Async Axios 呼叫有關。組件在呼叫之前呈現。知道如何在不從 axios 中洗掉異步（這會破壞它）的情況下延遲這個嗎？

我的 App.js：

import './App.css';
import React, { useEffect } from 'react';
import axios from 'axios'
import BarChart from './components/BarChart';
import GraphChart from './components/GraphChart';
import _, { orderBy } from 'lodash'



const config = {
'Content-Type': 'application/json',
"Accept": "application/json",
}

const arrayElements = [];

const App = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(async () => {
const { data } = await axios({ url: 'http://192.168.*/', method: 'GET', data: null, withCredentials: true, headers: config })

data.value.forEach(d => {

  const IdNumber= d._IdNumber
  const dateValue = d._dataValue
  arrayElements.push({ IdNumber, dateValue })
})

}, [])

return (
<div className="app">
<div className="example">
<div id="wrapper">`
<BarChart
arrElements={arrayElements}
/>
</div>
<div id="wrapper">
<GraphChart
arrElements={arrayElements}
/>
</div>
</div>
</div>
);
}

export default App;

我的圖表：

import React, { useEffect, useState } from 'react' 
import Chart from 'react-apexcharts'
import _ from 'lodash'

const GraphChart = ({ arrElements}) => {
const [category, setCategory] = useState([])
const [data, setData] = useState([])

useEffect(() => {
    let series = [];
    let categories = [];
    let orderedArrElements= _.orderBy(arrElements, ['dateValue'], ['asc', 'desc'])
    for (let i = 0; i < orderedArrElements.length; i  ) {
        series.push(
            orderedArrElements[i].IdNumber
        )
        categories = categories.concat(orderedArrElements[i].dateValue)
    }
    console.log(categories)

    setCategory(categories)
    setData(series)
    console.log("is called")
}, [arrElements])

return (
    <div>
        <Chart
            options={{
                chart: {
                    id: "basic-graph",
                },
                stroke: {
                    curve: 'smooth',
                    colors: ['#00BAEC']
                },
                grid: {
                    row: {
                        colors: ['#f3f3f3', 'transparent'],
                        opacity: 0
                    },
                },
                fill: {
                    gradient: {
                        enabled: true,
                        opacityFrom: 0.65,
                        opacityTo: 0
                    }
                },
                markers: {
                    size: 5,
                    colors: ["#000524"],
                    strokeColor: "#00BAEC",
                    strokeWidth: 3
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: category,
                    labels: {
                        style: {
                            colors: '#fff'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: '#fff'
                        }
                    }
                },
            }}
            series={[{
                name: "ID",
                data: data
            }
            ]}
            type="area"
            width={2000}
            height={1000} />
    </div>


   )
}

export default GraphChart

它確實在所有代碼都在 App.js 中時呈現。

uj5u.com熱心網友回復：

您應該使用狀態來跟蹤arrayElements.

按照您現在的方式，圖形組件使用arrayElements = []. 在下一步中，資料被附加到arrayElements，但 React 沒有注意到這一點，因此不會重新渲染圖表。

如果您按照下面的方式初始化arrayElements并const [arrayElements, setArrayElements] = useState([])更新資料，那么 React 將在收到資料后立即注意到更改并重新渲染圖形組件。

const newData = data.value.map(d => {

  const IdNumber= d._IdNumber
  const dateValue = d._dataValue
  return { IdNumber, dateValue }
})
setArrayElements(newData)

標籤：javascript 反应 api 反应钩子 顶点图

上一篇：將物件串列作為URL引數傳遞

下一篇：如何使用npm安裝axios最新版本？[復制]