从 api 获取新数据并进一步渲染到 react typescript 列表中

问：

这是我的api：

const getTransactionsCashD = async (staff_id: string, page: number) => {
    setLoading(true);
    const httpClient = getHttpClient();
    try {
      const { data } = await httpClient.get<{}>(
        "/api/user/get-transaction-cashd",
        {
          params: {
            page: page,
            pageSize: "15",
            staff_id: staff_id,
          },
        }
      );
      let listTransaction: any = data;
      setTransactionListCashD((prevList) => [
        ...prevList,
        ...listTransaction?.result?.result,
      ]);
      setLoading(false);
    } catch (error) {
      setLoading(true);
      console.log(error);
    }
  };

这是我用来转换从api返回的数据的函数：

const transactionGroupByDayList = useMemo<TransactionsGroupByDay[]>(() => {
    const timeFormat = "MMM YYYY";
    const formatedTransitionList: TransactionsGroupByDay[] = [];
    const transactions: Record<string, TransactionCashD> = {};
    console.log("transactionListCashD check", transactionListCashD);
    if (transactionListCashD.length > 0) {
      const groupTransactionByGroup = transactionListCashD
        .sort((a, b) => b.created_date.valueOf() - a.created_date.valueOf())
        .reduce((acc: Record<string, Array<TransactionCashD>>, item) => {
          const dateString = dayjs(item.created_date).format(timeFormat);
          const title = dayjs(item.created_date).isToday()
            ? "Today"
            : dateString;
          if (!acc[title]) {
            acc[title] = [];
          }

          const transaction: TransactionCashD = {
            _id: item._id,
            total_deduction: item.total_deduction,
            message:
              `Withdrawal including ` + "$" + item.fee_amount + " CashD fee",
            created_date: item.created_date,
          };

          acc[title].push(transaction);
          transactions[transaction._id] = transaction;

          return acc;
        }, {});

      for (const title in groupTransactionByGroup) {
        formatedTransitionList.push({
          title,
          transactions: groupTransactionByGroup[title],
        });
      }
      console.log("groupTransactionByGroup", groupTransactionByGroup);
      return formatedTransitionList;
    } else {
      return [];
    }
  }, [transactionListCashD]);

这是我呈现列表的地方：

<Box ref={ref} className={classes.scrollConfig} sx={{width: '100%' ,paddingRight: '0px !important' ,marginBottom: "70px", marginTop: "20px"}}>
      {transactionGroups.length > 0 ? (
        <InfiniteScroll 
          dataLength={transactionGroups.length}
          next={handleLoadMore}
          loader={<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}><CircularProgress sx={{ scale: "0.5" }} />Loading...</Box>}
          hasMore={true}
          endMessage={<Typography sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>Nothing more to show</Typography>}
          height="70vh"
        >
          {transactionGroups.map((item, index) => (
            <Box sx={{ marginTop: "30px" }} key={item.title}>
              <Box
                key={index}
                sx={{
                  fontSize: "14px",
                  textTransform: "uppercase",
                  fontStyle: "italic",
                  marginLeft: "10px",
                  marginBottom: "10px",
                }}
              >
                {item.title}
              </Box>
              {item.transactions.map((transaction) => (
                <TransactionListItem
                  id={transaction._id}
                  message={transaction.message}
                  total_deduction={transaction.total_deduction}
                  item={transaction}
                  createdDate={transaction.created_date}
                />
              ))}
            </Box>
          ))}
        </InfiniteScroll>
      ) : (
        <Box className={classes.transactionListEmptyContent}>
          {loading ? (
            <Box
              sx={{
                display: "flex",
                width: "100%",
                height: "70vh",
                alignItems: "center",
                justifyContent: "center",
                flexDirection: "column",
              }}
            >
              <>
                <CircularProgress />
                <Box sx={{ marginTop: "20px" }}>Waiting...</Box>
              </>
            </Box>
          ) : (
            <>
              <Box>You’ve yet to make a withdrawal!</Box>
              <Box>
                Make your{" "}
                <Box
                  className={classes.textLink}
                  component="span"
                  onClick={goToWithdrawal}
                >
                  first withdrawal today.
                </Box>
              </Box>
            </>
          )}
        </Box>
      )}
    </Box>

我的问题是，当我滚动到列表底部时，需要再次调用api并将新数据添加到列表中，但是当我向下滚动时，api仍然被调用，但新数据不会呈现到视图中，只有当我编辑代码并且代码在我的IDE中自行更新时，才会添加数据， 我错了什么，请帮帮我，非常感谢！