下一个js getServerSideProps中的水合错误

enter image description hereimport { Grid } from '@mui/material';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useState, useEffect } from 'react';
import StatisticsCard from '@/components/dashboard/StatisticsCard';
import { DASHBOARD } from '@/graphql/dashboard';
import { generalApoloClient } from '@/config/appolloClients';
import { validateGraphQlError } from '@/utils/validateError';

const Home = ({ dashboardData }) => {
  const STATISTICS_DATA = [
    { color: '#7372AE', title: 'total_companies', value: 10, trendNumber: 5 },
    { color: '#E96467', title: 'total_invoices', value: 43, trendNumber: 7 },
    { color: '#54CA8A', title: 'internal_invoices', value: 116, trendNumber: 18 },
    { color: '#FFC475', title: 'total_projects', value: 35, trendNumber: 10 }
  ];

  const [statisticsData, setStatistics] = useState(STATISTICS_DATA);

  useEffect(() => {
    if (dashboardData) {
      const updatedStatistics = STATISTICS_DATA.map((stat) => ({
        ...stat,
        value: dashboardData[stat.title] || stat.value
      }));
      setStatistics(updatedStatistics);
    }
  }, [dashboardData]);

  return (
    <Grid container spacing={3}>
      <Grid item xs={12}>
        <StatisticsCard data={statisticsData} />
      </Grid>
    </Grid>
  );
};

export default Home;

export async function getServerSideProps(context) {
  let dashboardData = {};
  try {
    const { data: dashboardResponse } = await generalApoloClient.query({
      query: DASHBOARD
    });
    dashboardData = dashboardResponse?.DashboardEssentials || {};
  } catch (error) {
    validateGraphQlError(error);
  }

  return {
    props: {
      ...(await serverSideTranslations(context.locale, ['common'])), // Load translations
      dashboardData
    }
  };
}
// Staticics Components
// MUI Imports

import { Avatar, Box, Card, CardContent, Typography } from '@mui/material';
import Grid from '@mui/material/Grid';
import { AccountMultipleOutline } from 'mdi-material-ui';
import { styled } from '@mui/material/styles';

const StyledCard = styled(Card)(({ color }) => ({
  transition: 'border 0.3s ease-in-out, box-shadow 0.3s ease-in-out, margin 0.3s ease-in-out',
  boxShadow: 'none',
  borderRadius: '16px',
  borderBottom: `solid 2px ${color}90`,
  '[data-skin="bordered"] &:hover': {
    boxShadow: 'none'
  },
  '&:hover': {
    borderBottomWidth: '3px',
    borderBottomColor: color,
    // boxShadow: 'var(--mui-customShadows-xl)',
    marginBlockEnd: '-1px'
  }
}));

const HorizontalWithBorder = (props) => {
  // Props
  const { title, value, trendNumber, color } = props;

  return (
    <StyledCard color={color || 'primary'}>
      <CardContent sx={{ gap: 1, '&:last-child': { pb: 2 } }}>
        <Box display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
          <Avatar
            sx={{ color: color, backgroundColor: `${color}40`, borderRadius: 2 }}
            variant="rounded">
            <AccountMultipleOutline />
          </Avatar>
          <Typography variant="h4" fontWeight={600} fontSize={40}>
            {value}
          </Typography>
        </Box>
        <Box display={'flex'} flexDirection={'column'} mt={2}>
          <Typography color="text.primary" fontWeight={600} fontSize={14}>
            {title}
          </Typography>
          <Box display={'flex'} alignItems={'center'} gap={1}>
            <Typography
              fontWeight={500}
              fontSize={14}>{`${trendNumber > 0 ? '+' : ''}${trendNumber}%`}</Typography>
            <Typography variant="body2" color="text.disabled" fontWeight={500} fontSize={12}>
              monthly baises
            </Typography>
          </Box>
        </Box>
      </CardContent>
    </StyledCard>
  );
};

const StatisticsCard = ({ data }) => {
  return (
    data && (
      <Grid container spacing={2.5}>
        {data?.map((item, index) => (
          <Grid item xs={12} sm={6} md={3} key={index}>
            <HorizontalWithBorder {...item} />
          </Grid>
        ))}
      </Grid>
    )
  );
};

export default StatisticsCard;

导致水合误差。在阅读文档时,我了解到SSR和CSR之间的UI不匹配,因此我删除了使用useState更新统计数据的操作,并将props statistics_DATA数组直接提供给statistics组件。然后也发生了水合误差。现在我不清楚我的代码中发生了什么