我想按日程显示收入,但是只有在刷新页面后才会显示
// 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尝试过之后才能起作用,结果相同... 如何解决这个错误?有什么出路?