Реакция - Сервисный вызов вызывается 3 раза и не проходит корректно - PullRequest
Новая
       10

Реакция - Сервисный вызов вызывается 3 раза и не проходит корректно

0 голосов
/ 28 апреля 2020

Я пишу о создании веб-приложения с React и Redux с использованием реакционных хуков. Я создал service, который будет предъявлять иск ios, чтобы сделать все для внешнего API и вернуть некоторые данные. Затем эти данные подключаются к Redux Store, а компоненты state затем передаются дочернему компоненту через props.

Проблема, с которой я сталкиваюсь - это A.) Кажется, что родительский компонент загружается 3 раза & B.) Синхронизация выглядит следующим образом: console output: 

reducer process time: 0.14
overview data {}
props undefined
overview data {accessibility: {…}, qa: {…}, seo: {…}, total: 88.52, _links: {…}}
SET_DASHBOARD_OVERVIEW
dispatching {type: "SET_DASHBOARD_OVERVIEW", webDashboard: {…}}
reducer process time: 0.03
next state {settings: Array(0), webDashboard: Array(1)}
overview data {accessibility: {…}, qa: {…}, seo: {…}, total: 88.52, _links: {…}}

. Я знаю, что это проблема синхронизации, когда родительский / дочерний компоненты загружают, вызов не был сделан для данных, и в таком случае нет данных для передачи через реквизит. Я изо всех сил пытаюсь выяснить, как заставить это работать так, чтобы aprent загрузил, сделал вызов, получил данные, передал данные ребенку.

Сервис. js

const axios = require('axios');
const moment = require('moment');

const siteImproveUrl = 'https://api.siteimprove.com/v2/sites/*******';

const authStr = '***********';

const getOverview = axios
    .get(siteImproveUrl + '/dci/overview', {params: {}, headers: {'Authorization': authStr}})
    .then(response => response.data)
    .catch(error => {
        if(error.response) {
            return error.reponse
        }
    });

module.exports = {
    getOverview
};

Панель инструментов. js

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';

import QuickAnalytics from './quickAnalytics';
import TotalVisits from './totalVisits';
import PageRankings from './pageRankings';
import VisitsByHour from './visitsByHour';
import VisitLast30Days from './visitsLast30Days';

import 'chartist/dist/chartist';
import 'chartist/dist/chartist.min.css';

import './visitsByTime.scss';

import store from '../../../Redux/Store/store';
import { setDashboardOverview } from '../../../Redux/Actions/Actions';

const { getOverview } = require('../../../Util/Service');

const WebsiteDashboard = () => {
    const [overviewData, setOverviewData] = useState({});
    const [loading, setLoading] = useState(true);

    async function fetchData() {
        getOverview.then(result => {
            try {
                setLoading(true);
                setOverviewData(result);
                store.dispatch(setDashboardOverview({overview: overviewData}));
            } catch (e) {
                console.log(e); //TODO: Add Toast service
            } finally {
                setLoading(false);
            }
        });
    }

    useEffect(() => {
        if(loading) {
            fetchData();
        }
    }, [loading]);

    console.log('overview data',overviewData);

    return (
        <div>
            <div className="row">
                <div className="col">
                    <div className="card-chart card">
                        <div className="card-header">
                            <div className="row">
                                <div className="text-left col-sm-6">
                                    <h5 className="card-category">Website Admin</h5>
                                    <h3 className="card-title">Dashboard</h3>
                                </div>
                            </div>
                        </div>
                        <div className="card-body">
                            <div className="row">
                                <div className="text-left col-12">
                                    <QuickAnalytics overviewData={overviewData.qa}/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-md-6">
                    <div className="card-chart card">
                        <div className="card-header">
                            <div className="row">
                                <div className="text-left col-sm-6">
                                    <h5 className="card-category">Total Visits Today</h5>
                                    <h3 className="card-title">Total: 6,550</h3>
                                </div>
                            </div>
                        </div>
                        <div className="card-body">
                            <div className="row">
                                <div className="text-left col-12">
                                    <TotalVisits />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <div className="card-chart card">
                        <div className="card-header">
                            <div className="row">
                                <div className="text-left col-sm-6">
                                    <h5 className="card-category">Top 5 pages</h5>
                                    <h3 className="card-title">As of: 06/26/20</h3>
                                </div>
                            </div>
                        </div>
                        <div className="card-body">
                            <div className="row">
                                <div className="text-left col-12">
                                    <PageRankings />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-md-12">
                    <div className="card-chart card">
                        <div className="card-header">
                            <div className="row">
                                <div className="text-left col-sm-6">
                                    <h5 className="card-category">Visits By Hour</h5>
                                    <h3 className="card-title">Total Page Visits: 34,890</h3>
                                </div>
                            </div>
                        </div>
                        <div className="card-body">
                            <div className="row">
                                <div className="text-left col-12">
                                    <VisitsByHour />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-md-12">
                    <div className="card-chart card">
                        <div className="card-header">
                            <div className="row">
                                <div className="text-left col-sm-6">
                                    <h5 className="card-category">Visits In The Last 30 Days</h5>
                                    <h3 className="card-title">Total Page Visits: 434,890</h3>
                                </div>
                            </div>
                        </div>
                        <div className="card-body">
                            <div className="row">
                                <div className="text-left col-12">
                                    <VisitLast30Days />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default connect()(WebsiteDashboard);

quickAnalytics. js

import React from 'react';
import { connect } from 'react-redux';

import ChartistGraph from 'react-chartist';

import './pieChart.scss';

let QA_data = {
    series: [80, 20]
};
let ADA_data = {
    series: [65, 35]
};
let SEO_data = {
    series: [50, 50]
};
let sum = function (a, b) { return a + b };

export default class QuickAnalytics extends React.Component {
    constructor(props) {
        super(props);
        console.log('props', props.overviewData);
        this.state = {
            data: props.overviewData
        };
    }

    render() {
        return (
            <div>
                <div className="row d-flex align-items-md-center mx-auto">
                    <div className="col text-center"> 
                        <div className="pieChart">
                            <h4>Site Improve QA</h4>
                            <ChartistGraph data={QA_data} options={
                                {
                                    labelInterpolationFnc: function (value) {
                                        return Math.round(value / QA_data.series.reduce(sum) * 100) + '%';
                                    },
                                    donut: true,
                                    donutWidth: 25,
                                    donutSolid: true,
                                    showLabel: true
                                }} type={'Pie'} />
                        </div>
                    </div>
                    <div className="col text-center">
                        <div className="pieChart">
                            <h4>ADA Accessibility</h4>
                            <ChartistGraph data={ADA_data} options={
                                {
                                    labelInterpolationFnc: function (value) {
                                        return Math.round(value / ADA_data.series.reduce(sum) * 100) + '%';
                                    },
                                    donut: true,
                                    donutWidth: 25,
                                    donutSolid: true,
                                    showLabel: true
                                }} type={'Pie'} />
                        </div>
                    </div>
                    <div className="col text-center">
                        <div className="pieChart">
                            <h4>SEO</h4>
                            <ChartistGraph data={SEO_data} options={
                                {
                                    labelInterpolationFnc: function (value) {
                                        return Math.round(value / SEO_data.series.reduce(sum) * 100) + '%';
                                    },
                                    donut: true,
                                    donutWidth: 25,
                                    donutSolid: true,
                                    showLabel: true
                                }} type={'Pie'} />
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

1 Ответ

0 голосов
/ 28 апреля 2020

Я исправил проблему, добавив условную загрузку вокруг дочернего компонента: 

{loading ? (
    <div> Loading...</div>
) : (
    <QuickAnalytics overviewData={overviewData.qa} />
)}
...