From a364245ca5d70b5354ef5118bac6a26f893d601f Mon Sep 17 00:00:00 2001 From: lovely90133 Date: Sun, 3 May 2026 23:38:59 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=BE=9D=E8=B5=96=E5=92=8C=E5=8F=98=E9=87=8F=E5=A3=B0=E6=98=8E?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复多个组件中缺少的依赖项，将params.groupId添加到useEffect依赖数组 修正group.js中未声明的变量，使用let声明expensePerPerson和循环变量val 编辑费用后重定向到配置的VIEW_GROUP_URL --- .DS_Store | Bin 10244 -> 10244 bytes client/src/components/expense/editExpense.jsx | 4 ++-- .../components/groups/settlement/index.jsx | 2 +- .../groups/viewGroup/groupCategoryGraph.jsx | 4 ++-- .../groups/viewGroup/groupMonthlyGraph.jsx | 6 +++--- .../src/components/groups/viewGroup/index.jsx | 2 +- components/group.js | 8 ++++---- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/.DS_Store b/.DS_Store index eced0a80d094d887f18dff52d1e85a625dee8412..aa53cfce7bd3dc9fd75190a8ef21278523fa4579 100644 GIT binary patch delta 57 zcmZn(XbG6$mJU^hRb`eq)1+02{&iIg*LzAB!>xS3I!jdf!|Im>2th2JcbBgJH3 H!c~j_KAaOA delta 810 zcmZn(XbG6$&uFzVU^hRb)n*=n+024W3@!{#N#(@_NjdpR3=9n0CNB^uoHw;eB&n*B6h|gj!gNf(nySPA& z<+$uCpyF}jm?J_i1*cp=2Esg+I}d3**UqMUCs>%8;GMAYl0hXdGM)*@-fbGPH9Hj)0tqB#&?= zHhE;HG6)2KoC?*;#8AAMU$mN0l7}G==-d>BREBtlTrjH?=z&zQ^Bb9r4JS_*a;e9u z2-)#WMOXg=Ex@T3*)#mctozx_z@EXQ9_G0q1`c90Ap4e;c>~C|I1S%iEhfsknO)&G R%jVU>#X~68Ci9Eh0RY4Jye|L% diff --git a/client/src/components/expense/editExpense.jsx b/client/src/components/expense/editExpense.jsx index acc39a2..2ab8da9 100644 --- a/client/src/components/expense/editExpense.jsx +++ b/client/src/components/expense/editExpense.jsx @@ -16,7 +16,7 @@ import Loading from '../loading'; import { useNavigate } from "react-router-dom"; import AlertBanner from '../AlertBanner'; import { parseISO } from 'date-fns'; - +import configData from '../../config.json'; export default function EditExpense() { @@ -55,7 +55,7 @@ export default function EditExpense() { onSubmit: async () => { setLoading(true) if(await editExpenseService(values, setAlert, setAlertMessage)) - navigate(-1) + window.location = configData.VIEW_GROUP_URL + values.groupId }, }); diff --git a/client/src/components/groups/settlement/index.jsx b/client/src/components/groups/settlement/index.jsx index cfd0316..16aca79 100644 --- a/client/src/components/groups/settlement/index.jsx +++ b/client/src/components/groups/settlement/index.jsx @@ -35,7 +35,7 @@ export const GroupSettlements = ({ currencyType }) => { setLoading(false) } getGroupSettlement() - }, [reload]) + }, [reload, params.groupId]) return ( <> diff --git a/client/src/components/groups/viewGroup/groupCategoryGraph.jsx b/client/src/components/groups/viewGroup/groupCategoryGraph.jsx index c4f9c19..f048ba6 100644 --- a/client/src/components/groups/viewGroup/groupCategoryGraph.jsx +++ b/client/src/components/groups/viewGroup/groupCategoryGraph.jsx @@ -66,12 +66,12 @@ const GroupCategoryGraph = ({currencyType}) => { } const category_exp = await getGroupCategoryExpService(groupIdJson, setAlert, setAlertMessage) - setCategoryExp(category_exp.data.data) + setCategoryExp(category_exp?.data?.data) setLoading(false) } getGroupCategoryExpense() - }, []) + }, [params.groupId]) return ( <> {loading ? : diff --git a/client/src/components/groups/viewGroup/groupMonthlyGraph.jsx b/client/src/components/groups/viewGroup/groupMonthlyGraph.jsx index 2e91c3a..36b5cc9 100644 --- a/client/src/components/groups/viewGroup/groupMonthlyGraph.jsx +++ b/client/src/components/groups/viewGroup/groupMonthlyGraph.jsx @@ -71,13 +71,13 @@ const GroupMonthlyGraph = () => { const monthly_exp = await getGroupMonthlyExpService(groupIdJson, setAlert, setAlertMessage) const daily_exp = await getGroupDailyExpService(groupIdJson, setAlert, setAlertMessage) - setMonthlyExp(monthly_exp.data.data) - setDailyExp(daily_exp.data.data) + setMonthlyExp(monthly_exp?.data?.data) + setDailyExp(daily_exp?.data?.data) setLoading(false) } getGroupMonthlyExpense() - }, []) + }, [params.groupId]) return ( <> {loading ? : diff --git a/client/src/components/groups/viewGroup/index.jsx b/client/src/components/groups/viewGroup/index.jsx index 8e64b32..8e4ff54 100644 --- a/client/src/components/groups/viewGroup/index.jsx +++ b/client/src/components/groups/viewGroup/index.jsx @@ -80,7 +80,7 @@ export default function ViewGroup() { setLoading(false) } getGroupDetails() - }, []); + }, [params.groupId]); const CategoryStyle = styled('span')(({ theme }) => ({ top: 22, diff --git a/components/group.js b/components/group.js index ae54a9f..7c860fd 100644 --- a/components/group.js +++ b/components/group.js @@ -301,7 +301,7 @@ exports.addSplit = async (groupId, expenseAmount, expenseOwner, expenseMembers) }) group.groupTotal += expenseAmount group.split[0][expenseOwner] += expenseAmount - expensePerPerson = expenseAmount / expenseMembers.length + let expensePerPerson = expenseAmount / expenseMembers.length expensePerPerson = Math.round((expensePerPerson + Number.EPSILON) * 100) / 100; //Updating the split values per user for (var user of expenseMembers) { @@ -310,7 +310,7 @@ exports.addSplit = async (groupId, expenseAmount, expenseOwner, expenseMembers) //Nullifying split - check if the group balance is zero else added the diff to owner let bal=0 - for(val of Object.entries(group.split[0])) + for(let val of Object.entries(group.split[0])) { bal += val[1] } @@ -334,7 +334,7 @@ exports.clearSplit = async (groupId, expenseAmount, expenseOwner, expenseMembers }) group.groupTotal -= expenseAmount group.split[0][expenseOwner] -= expenseAmount - expensePerPerson = expenseAmount / expenseMembers.length + let expensePerPerson = expenseAmount / expenseMembers.length expensePerPerson = Math.round((expensePerPerson + Number.EPSILON) * 100) / 100; //Updating the split values per user for (var user of expenseMembers) { @@ -343,7 +343,7 @@ exports.clearSplit = async (groupId, expenseAmount, expenseOwner, expenseMembers //Nullifying split - check if the group balance is zero else added the diff to owner let bal=0 - for(val of Object.entries(group.split[0])) + for(let val of Object.entries(group.split[0])) { bal += val[1] } From f9fed921c7ae33415dd7fd03c158375f19a010f3 Mon Sep 17 00:00:00 2001 From: lovely90133 Date: Sun, 3 May 2026 23:50:10 +0800 Subject: [PATCH 2/2] =?UTF-8?q?refactor(=E5=89=8D=E7=AB=AF):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E9=A1=B5=E9=9D=A2=E5=88=B7=E6=96=B0=E9=80=BB=E8=BE=91?= =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E7=94=A8=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E6=9B=BF=E4=BB=A3=E5=BC=BA=E5=88=B6=E5=88=B7=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将强制页面刷新(window.location)改为使用react-router的navigate进行状态管理 添加refreshKey状态来触发组件数据更新 优化删除和添加操作后的数据刷新方式 --- client/src/components/expense/addExpense.jsx | 5 ++-- client/src/components/expense/editExpense.jsx | 2 +- client/src/components/expense/expenseCard.jsx | 8 ++++-- .../components/groups/settlement/index.jsx | 7 ++--- .../groups/settlement/userBalanceChart.jsx | 6 +++-- .../groups/viewGroup/groupCategoryGraph.jsx | 4 +-- .../groups/viewGroup/groupMonthlyGraph.jsx | 4 +-- .../src/components/groups/viewGroup/index.jsx | 26 +++++++++++++++---- 8 files changed, 43 insertions(+), 19 deletions(-) diff --git a/client/src/components/expense/addExpense.jsx b/client/src/components/expense/addExpense.jsx index 2206377..6f72b80 100644 --- a/client/src/components/expense/addExpense.jsx +++ b/client/src/components/expense/addExpense.jsx @@ -11,7 +11,7 @@ import useResponsive from '../../theme/hooks/useResponsive'; import { currencyFind } from '../../utils/helper'; import { addExpenseService } from '../../services/expenseServices'; import configData from '../../config.json' -import { useParams } from 'react-router-dom' +import { useParams, useNavigate } from 'react-router-dom' import { getGroupDetailsService } from '../../services/groupServices'; import Loading from '../loading'; import { Link as RouterLink } from 'react-router-dom'; @@ -20,6 +20,7 @@ import { parseISO } from 'date-fns'; export default function AddExpense() { + const navigate = useNavigate(); const params = useParams(); const mdUp = useResponsive('up', 'md'); const profile = JSON.parse(localStorage.getItem('profile')) @@ -58,7 +59,7 @@ export default function AddExpense() { onSubmit: async () => { setLoading(true) if(await addExpenseService(values, setAlert, setAlertMessage)) - window.location = configData.VIEW_GROUP_URL+groupId + navigate(configData.VIEW_GROUP_URL + groupId, { state: { refresh: true } }) }, }); diff --git a/client/src/components/expense/editExpense.jsx b/client/src/components/expense/editExpense.jsx index 2ab8da9..7b734a3 100644 --- a/client/src/components/expense/editExpense.jsx +++ b/client/src/components/expense/editExpense.jsx @@ -55,7 +55,7 @@ export default function EditExpense() { onSubmit: async () => { setLoading(true) if(await editExpenseService(values, setAlert, setAlertMessage)) - window.location = configData.VIEW_GROUP_URL + values.groupId + navigate(configData.VIEW_GROUP_URL + values.groupId, { state: { refresh: true } }) }, }); diff --git a/client/src/components/expense/expenseCard.jsx b/client/src/components/expense/expenseCard.jsx index ba12ab5..03ac99c 100644 --- a/client/src/components/expense/expenseCard.jsx +++ b/client/src/components/expense/expenseCard.jsx @@ -38,7 +38,7 @@ const modelStyle = { }; -export default function ExpenseCard({ expenseId, expenseName, expenseAmount, expensePerMember, expenseOwner, expenseDate, currencyType }) { +export default function ExpenseCard({ expenseId, expenseName, expenseAmount, expensePerMember, expenseOwner, expenseDate, currencyType, onExpenseDeleted }) { const mdUp = useResponsive('up', 'md'); const [anchorEl, setAnchorEl] = useState(null); const [deleteConfirm, setDeleteConfirm] = useState(false) @@ -60,8 +60,12 @@ export default function ExpenseCard({ expenseId, expenseName, expenseAmount, exp const apiDeleteCall = async() => { await deleteExpenseService({id: expenseId}) - window.location.reload() deleteConfirmClose() + if (onExpenseDeleted) { + onExpenseDeleted() + } else { + window.location.reload() + } } const open = Boolean(anchorEl); diff --git a/client/src/components/groups/settlement/index.jsx b/client/src/components/groups/settlement/index.jsx index 16aca79..4e469a7 100644 --- a/client/src/components/groups/settlement/index.jsx +++ b/client/src/components/groups/settlement/index.jsx @@ -12,7 +12,7 @@ import SettlementCard from './settlementCard'; import UserBalanceChart from './userBalanceChart'; -export const GroupSettlements = ({ currencyType }) => { +export const GroupSettlements = ({ currencyType, refreshKey = 0 }) => { const params = useParams(); const [noSettle, setNoSettle] = useState(true) const [alert, setAlert] = useState(false) @@ -27,6 +27,7 @@ export const GroupSettlements = ({ currencyType }) => { const getGroupSettlement = async () => { setReload(false) setLoading(true) + setNoSettle(true) const groupIdJson = { id: params.groupId } @@ -35,7 +36,7 @@ export const GroupSettlements = ({ currencyType }) => { setLoading(false) } getGroupSettlement() - }, [reload, params.groupId]) + }, [reload, params.groupId, refreshKey]) return ( <> @@ -71,7 +72,7 @@ export const GroupSettlements = ({ currencyType }) => { No Settlement requiered ! - : } + : } diff --git a/client/src/components/groups/settlement/userBalanceChart.jsx b/client/src/components/groups/settlement/userBalanceChart.jsx index 68ce613..8291e62 100644 --- a/client/src/components/groups/settlement/userBalanceChart.jsx +++ b/client/src/components/groups/settlement/userBalanceChart.jsx @@ -10,7 +10,7 @@ import { Bar } from "react-chartjs-2" import useResponsive from "../../../theme/hooks/useResponsive" -const UserBalanceChart = () => { +const UserBalanceChart = ({ refreshKey = 0 }) => { const params = useParams(); const mdUp = useResponsive('up', 'md'); const [loading, setLoading] = useState(false) @@ -51,6 +51,8 @@ const UserBalanceChart = () => { useEffect(() => { const getGroupDetails = async () => { setLoading(true) + setGraphData([]) + setGraphLabel([]) const groupIdJson = { id: params.groupId } @@ -71,7 +73,7 @@ const UserBalanceChart = () => { setLoading(false) } getGroupDetails() - }, []) + }, [params.groupId, refreshKey]) return ( <> diff --git a/client/src/components/groups/viewGroup/groupCategoryGraph.jsx b/client/src/components/groups/viewGroup/groupCategoryGraph.jsx index f048ba6..d48ebee 100644 --- a/client/src/components/groups/viewGroup/groupCategoryGraph.jsx +++ b/client/src/components/groups/viewGroup/groupCategoryGraph.jsx @@ -10,7 +10,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels'; import 'chart.js/auto' import { convertToCurrency, currencyFind } from '../../../utils/helper'; -const GroupCategoryGraph = ({currencyType}) => { +const GroupCategoryGraph = ({currencyType, refreshKey = 0}) => { const params = useParams(); const [alert, setAlert] = useState(false) const [alertMessage, setAlertMessage] = useState() @@ -71,7 +71,7 @@ const GroupCategoryGraph = ({currencyType}) => { } getGroupCategoryExpense() - }, [params.groupId]) + }, [params.groupId, refreshKey]) return ( <> {loading ? : diff --git a/client/src/components/groups/viewGroup/groupMonthlyGraph.jsx b/client/src/components/groups/viewGroup/groupMonthlyGraph.jsx index 36b5cc9..8f9cc89 100644 --- a/client/src/components/groups/viewGroup/groupMonthlyGraph.jsx +++ b/client/src/components/groups/viewGroup/groupMonthlyGraph.jsx @@ -9,7 +9,7 @@ import { Line } from "react-chartjs-2"; import 'chart.js/auto' import { monthNamesMMM } from '../../../utils/helper'; -const GroupMonthlyGraph = () => { +const GroupMonthlyGraph = ({ refreshKey = 0 }) => { const params = useParams(); const [alert, setAlert] = useState(false) const [alertMessage, setAlertMessage] = useState() @@ -77,7 +77,7 @@ const GroupMonthlyGraph = () => { } getGroupMonthlyExpense() - }, [params.groupId]) + }, [params.groupId, refreshKey]) return ( <> {loading ? : diff --git a/client/src/components/groups/viewGroup/index.jsx b/client/src/components/groups/viewGroup/index.jsx index 8e4ff54..8ed6410 100644 --- a/client/src/components/groups/viewGroup/index.jsx +++ b/client/src/components/groups/viewGroup/index.jsx @@ -1,6 +1,6 @@ import { Box, Button, Container, Divider, Fab, Grid, Link, Stack, styled, Typography } from '@mui/material'; import React, { useEffect, useState } from 'react' -import { useParams } from 'react-router-dom' +import { useParams, useLocation } from 'react-router-dom' import { getGroupDetailsService, getGroupExpenseService } from '../../../services/groupServices'; import AlertBanner from '../../AlertBanner'; import Iconify from '../../Iconify'; @@ -19,6 +19,7 @@ const emailId = profile?.emailId var showCount = 10 export default function ViewGroup() { const params = useParams(); + const location = useLocation(); const [loading, setLoading] = useState(true); const [group, setGroup] = useState({}); const [groupExpense, setGroupExpense] = useState([]); @@ -30,6 +31,11 @@ export default function ViewGroup() { const [expFocus, setExpFocus] = useState(false); const [expenses, setExpenses] = useState() const [viewSettlement, setViewSettlement] = useState(0) + const [expenseRefreshKey, setExpenseRefreshKey] = useState(0) + + const triggerExpenseRefresh = () => { + setExpenseRefreshKey(prev => prev + 1) + } const toggleAllExp = () => { @@ -63,9 +69,18 @@ export default function ViewGroup() { return 0 } + useEffect(() => { + if (location.state?.refresh) { + triggerExpenseRefresh() + } + }, [location.state]) + useEffect(() => { const getGroupDetails = async () => { setLoading(true) + showCount = 10 + setShowAllExp(false) + setExpFocus(false) const groupIdJson = { id: params.groupId } @@ -80,7 +95,7 @@ export default function ViewGroup() { setLoading(false) } getGroupDetails() - }, [params.groupId]); + }, [params.groupId, expenseRefreshKey]); const CategoryStyle = styled('span')(({ theme }) => ({ top: 22, @@ -367,7 +382,7 @@ export default function ViewGroup() { } {viewSettlement === 1 && - + } {viewSettlement === 0 && @@ -405,6 +420,7 @@ export default function ViewGroup() { expenseOwner={myExpense?.expenseOwner} expenseDate={myExpense?.expenseDate} currencyType={group?.groupCurrency} + onExpenseDeleted={triggerExpenseRefresh} /> ))} @@ -414,10 +430,10 @@ export default function ViewGroup() { - + - + }