统计页面的顶部分类为“收入/支出”，和记账页的category很相似，所以可以直接使用。

统计页主要展示：标签，金额，（时间），为了把时间转化为年月日的格式，需要引入

yarn add dayjs
复制代码

基础代码为：

import Layout from "../components/Layout";
import React, {useState} from "react";
import {CategorySection} from "./money/CategorySection";
import {useRecords} from "../hooks/useRecords";
import {useTags} from "../hooks/useTags";
import day from "dayjs";

function Statistics() {
    const [category,setCategory]=useState<'-'|'+'>('-')
    const {records}=useRecords()
    const {getName}=useTags()
    return (
        <Layout>
            <CategorySection value={category}
                             onChange={(value) => setCategory(value)}/>
            <div>
                {records.map(r=>{
                    return <div>
                        {r.tagIds.map(tagId=><span>{getName(tagId)}</span>)}
                        <hr/>
                        {r.amount}
                        <hr/>
                        {day(r.createdAt).format('YYYY年MM月DD日')}
                    </div>
                })}
            </div>
        </Layout>
    )
}

export default Statistics;
复制代码

收入/支出分类

const selectedRecords = records.filter(r => r.category === category)
复制代码

将 records 改为 selectedRecords 即可。

统计页面按时间分类

注意：对象顺序不保证，比如 var o = { a:1, b:2 , c:3 } 并不能保证在不同浏览器中打印出的顺序都是abc，所以我们需要先分组再排序

function Statistics() {
    const [category, setCategory] = useState<'-' | '+'>('-')
    const {records} = useRecords()
    const {getName} = useTags()
    const hash: { [K: string]: RecordItem[] } = {}
    const selectedRecords = records.filter(r => r.category === category)

    selectedRecords.map(r => {
        const key = day(r.createdAt).format('YYYY年MM月DD日')
        if (!(key in hash)) {
            hash[key] = []
        }
        hash[key].push(r)
    })

    const array = Object.entries(hash).sort((a, b) => {
        if (a[0] === b[0]) {
            return 0
        }
        if (a[0] > b[0]) {
            return -1
        }
        if (a[0] < b[0]) {
            return 1
        }
        return 0
    })

    return (
        <Layout>
            <CategorySection value={category}
                             onChange={(value) => setCategory(value)}/>

            {array.map(([date, records]) =>
                <div>
                    <Header>
                        {date}
                    </Header>
                    {records.map(r => {
                        return <Item key={r.createdAt}>
                            <div className="tags oneLine">
                                {r.tagIds.map(tagId => <span key={tagId}>{getName(tagId)}</span>)
                                    //多标签时用逗号分隔
                                    .reduce((result,span,index,array)=>
                                        result.concat(index<array.length-1?[span,'，']:[span]),[] as ReactNode[])

                                }
                            </div>
                            {r.note && <div className="note">{r.note}</div>}
                            <div className="amount">￥{r.amount}</div>
                        </Item>
                    })}
                </div>)}
        </Layout>
    )
}

export default Statistics;
复制代码