React - 服务调用被调用 3 次并且没有正确传递道具

Question

我正在编写使用 react 钩子使用 React 和 redux 创建一个 Web 应用程序。我创建了一个service，它将起诉 axios 以对外部 API 进行全部处理并带回一些数据。然后将该数据插入Redux Store，然后通过props将组件state传递给子组件。

我面临的问题是 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: {…}}

我知道这是一个计时问题，当父/子组件加载时，尚未对数据进行调用，并且在这种情况下没有数据可以通过 props 传递。我正在努力弄清楚如何让它工作，以便 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);

快速分析.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>
)
}
}

Answer 1

我已经通过在子组件周围添加条件加载来解决此问题：

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