React 记账本教程：打造强大的详情页功能

2023-09-16 13:00:06

前言

欢迎来到 React 记账本系列教程的第四章！在本章中，我们将深入探讨如何创建功能强大的详情页，帮助用户按日期、收入/支出和类别对记录进行详细的展示。我们还将复用 CategorySection 组件，使您能够轻松地显示记账记录，并通过交互式图表直观地了解您的财务状况。

阅读记录

为了在详情页中显示记录，我们需要首先获取这些记录。为此，我们将使用 useRecords hook，它将返回一个包含所有记录的数组。

import { useRecords } from "./useRecords";

const DetailPage = () => {
  const records = useRecords();

  // ...
};

展示记录

现在我们已经获得了记录，接下来需要在详情页中展示这些记录。我们可以复用 CategorySection 组件来完成这项任务。

import CategorySection from "./CategorySection";

const DetailPage = () => {
  const records = useRecords();

  return (
    <div>
      <h1>详情页</h1>
      <CategorySection records={records} />
    </div>
  );
};

按日期展示记录

为了按日期展示记录，我们可以使用 JavaScript 的日期对象。首先，我们需要创建一个新的数组，其中包含每个日期的总收入和总支出。

const recordsByDate = {};
records.forEach((record) => {
  const date = record.date.toLocaleDateString();
  if (!recordsByDate[date]) {
    recordsByDate[date] = {
      income: 0,
      expense: 0,
    };
  }

  if (record.type === "income") {
    recordsByDate[date].income += record.amount;
  } else {
    recordsByDate[date].expense += record.amount;
  }
});

然后，我们可以使用这些数据来创建交互式图表，允许用户按日期查看他们的收入和支出情况。

按收入/支出展示记录

为了按收入/支出展示记录，我们可以使用类似的方法。首先，我们需要创建一个新的数组，其中包含每个收入/支出类型的总金额。

const recordsByCategory = {};
records.forEach((record) => {
  if (!recordsByCategory[record.category]) {
    recordsByCategory[record.category] = 0;
  }

  if (record.type === "income") {
    recordsByCategory[record.category] += record.amount;
  } else {
    recordsByCategory[record.category] -= record.amount;
  }
});