React hooks async useEffect 加载数据库数据

Question

I'm using async useEffect in React because I need to do database requests. Then, add this data to my react-charts-2

const [ plSnapShot, setPlSnapShot ] = useState({
   grossIncome: 0.00,
   opeExpenses: 0.00,
   nonOpeExpenses: 0.00,
   netIncome: 0.00,
   grossPotencialRent: 0.00,
   lastMonthIncome: 0.00
});

const [ thisMonthPayment, setThisMonthPayments ] = useState({
    labels: [],
    data: [],
    color: 'blue'
});


useEffect(() => {
    async function fetchData() {
        await axios.get(`${url.REQ_URL}/home/getUserFullName/${userID}`)
            .then(async (res) => {
                setUserFullName(res.data);

                await axios.get(`${url.REQ_URL}/home/getThisMonthPayments/${propertyID}`)
                    .then(async (resMonthPay) => {
                        let total = 0;
                        let obj = {
                            labels: [],
                            data: [],
                            color: 'blue'
                        };
                        const data = resMonthPay.data;
                        for(const d of data) {
                            obj.labels.push(helper.formatDate(new Date(d.date)));    
                            obj.data.push(d.amount);
                            total += d.amount;
                        }
                        setThisMonthPayments(obj);
                        setTotalEarnedMonth(parseFloat(total));

                        await axios.get(`${url.REQ_URL}/home/plSnapshot/${propertyID}`)
                            .then(async (resPL) => {
                                const data = resPL.data;
                                setPlSnapShot({
                                    grossIncome: parseFloat(data.GrossIncome || 0).toFixed(2),
                                    opeExpenses: parseFloat(data.OperatingExpenses || 0).toFixed(2),
                                    nonOpeExpenses: parseFloat(data.NonOperatingExpenses || 0).toFixed(2),
                                    netIncome: parseFloat(data.NetIncome || 0).toFixed(2),
                                    grossPotencialRent: parseFloat(data.GrossPotencialRent || 0).toFixed(2),
                                    lastMonthIncome: parseFloat(data.LastMonthIncome || 0).toFixed(2)
                                });
                            });
                    });
            });
    }
    fetchData();
}, [propertyID, userID]);

const pieChart = {
    chartData: {
        labels: ['Gross Income', 'Operating Expenses', 'Non Operating Expenses'],
        datasets: [{
            data: [plSnapShot.grossIncome, plSnapShot.opeExpenses, plSnapShot.nonOpeExpenses],
            backgroundColor: [
                ChartConfig.color.primary,
                ChartConfig.color.warning,
                ChartConfig.color.info
            ],
            hoverBackgroundColor: [
                ChartConfig.color.primary,
                ChartConfig.color.warning,
                ChartConfig.color.info
            ]
        }]
    }
};

const horizontalChart = {
    label: 'Last Month Income',
    labels: ['Gross Potencial Rent', 'Last Month Income'],
    chartdata: [plSnapShot.grossPotencialRent, plSnapShot.lastMonthIncome]
};

Here is an example of how I call the Chart component in my code in the render/return method.

<TinyPieChart
   labels={pieChart.chartData.labels}
   datasets={pieChart.chartData.datasets}
   height={110}
   width={100}
/>

And my Pie Chart component is just to display it

import React from 'react';
import { Pie } from 'react-chartjs-2';

// chart congig
import ChartConfig from '../../Constants/chart-config';

const options = {
    legend: {
        display: false,
        labels: {
            fontColor: ChartConfig.legendFontColor
        }
    }
};

const TinyPieChart = ({ labels, datasets, width, height }) => {
    const data = {
        labels,
        datasets
    };
    return (
        <Pie height={height} width={width} data={data} options={options} />
    );
}

export default TinyPieChart;

Mostly of the times it works just fine, but sometimes the chart data is loaded and displayed in the screen real quick, then it disappear and the chart is displayed empty (no data). Am I loading it properly with the useEffect or should I use another method?

Thanks you.

Answer 1

The momentary flashing is likely due to the fact that the chart data is empty on first render. So depending on the time it take for your useEffect to fetch the data, that flashing may present a real problem.

One common solution is to use a state variable to indicate that the data is being loaded and either not display anything in place of the chart or display a loaded of some sort. So you can add something like you suggested in the comments const [ loader, setLoader ] = useState(true) . Then once the data is loaded, togged it to false .

Meanwhile, inside your render function, you would do:

...
...
{loader ? 
   <div>Loading....</div>
 :
   <TinyPieChart
    labels={pieChart.chartData.labels}
    datasets={pieChart.chartData.datasets}
    height={110}
    width={100}
   />

}

loader can go from true to false or vise versa, depending on what make more intuitive sense to you.