为什么仅在刷新页面后才显示数据?

时间:2020-02-03 13:53:57

标签: reactjs

我想按日程显示收入,但是只有在刷新页面后才会显示

enter image description here

刷新页面: enter image description here

// chart
const ChartsView = props => {

	const {
		onPostIncomeData,
		onSumArr
	} = props;

	const onGetIncome = useMemo(() => {
		if (onPostIncomeData && onPostIncomeData.length) {
			return onSumArr(onPostIncomeData)
		}
	
		return [];
	}, [onPostIncomeData]);

	const [chartOptions, setChartOptions] = useState({
		options: {
			chart: {
				id: "basic-bar"
			},
			xaxis: {
				categories: moment.monthsShort()
			}
		},
		series: [
			{
				name: "Доход",
				data: [onGetIncome]
			}
		]
	});

	return (
		<Chart
      options={chartOptions.options}
      series={chartOptions.series}
      type="area"
			width="100%"
			height="400px"
    />
	);
};

export default ChartsView;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, { useEffect, useState, useMemo } from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import 'moment/locale/ru';

// Importing components
import DashboardView from '../../layout/Dashboard';
import withComponent from '../../hoc';
import { fetchCompany, fetchInvoice, addIncome, fethProjects } from '../../../store/actions';

const Dashboard = props => {

	// Props
	const {
		companyList,
		fetchCompany,
		fetchInvoice,
		invoiceList, 
		addIncome,
		fethProjects
	} = props;

	useEffect(() => {
		fetchCompany();
		fetchInvoice();
		fethProjects();
		// const monthName =  moment().subtract("month").startOf("month").format('MMMM');
	}, [fetchCompany, fetchInvoice, fethProjects]);

	// Суммирует и отправляет доходы
	const onPostIncomeData = useMemo(() => {
		if (invoiceList && invoiceList.length) {
			return invoiceList.map(i => {
				return i.amount;
			});
		}
	
		return [];
	}, [invoiceList]);

	const onSumArr = arr => {
		return arr.reduce((a,b) => a + b, 0);
	};
	
	// Render
	return (
		<DashboardView 
			onPostIncomeData={onPostIncomeData}
			onSumArr={onSumArr}
		/>
	);
};

// Redux
const mapStateToProps = state => {
	return {
		companyList: state.company.companyList,
		invoiceList: state.invoice.invoiceList
	};
};

const mapDispatchToProps = (dispatch, ownProps) => {
	const { api } = ownProps;
	return {
		fetchCompany: fetchCompany(api, dispatch),
		fetchInvoice: fetchInvoice(api, dispatch),
		addIncome: addIncome(api, dispatch),
		fethProjects: fethProjects(api, dispatch)
	};
};

export default withComponent()(
	connect(mapStateToProps, mapDispatchToProps)(Dashboard)
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在“仪表盘”中,我汇总了收入,并通过道具将其发送到“图表”, 但是它仅在刷新页面本身,使用useEffect尝试过之后才能起作用,结果相同... 如何解决这个错误?有什么出路?

0 个答案:

没有答案