jsのswitch文を使い配列に要素を追加したい

Question

家計簿アプリを作成していて、firestoreから取り出した配列からreact-chartjs-2のデータ、ラベル用にswitch文を使って新しい配列を作成して、要素を追加、変更していきたいのですが、思ったように動作しません。

//firestoreからのデータ
0: {id: "G4yoFNKPrHm1FhjGsG5h", categorie: "携帯代", expense: "2222", timestamp: "2021/4/9"}
1: {id: "Z4cENBMt5I8ty4cy0DnV", categorie: "携帯代", expense: "7777", timestamp: "2021/4/9"}
2: {id: "h6QiqVjSdV9Fwz2YvSxt", categorie: "携帯代", expense: "6000", timestamp: "2021/4/9"}
3: {id: "qT3ypMX0xJTokjnPwQKn", categorie: "携帯代", expense: "5000", timestamp: "2021/4/9"}
4: {id: "rdnD4THmmhRv2mIhWRiS", categorie: "携帯代", expense: "3333", timestamp: "2021/4/9"}
5: {id: "vcZkkp4lAVpxT9MN50n3", categorie: "携帯代", expense: "6000", timestamp: "2021/4/9"}

import React,{useEffect,useState} from 'react'
import {Bar} from 'react-chartjs-2'
import {useHistory} from 'react-router-dom'
import {PROPS} from './Index'
const Chart:React.FC<PROPS> = ({chartdata}) => {
  const [label,setLabel] =useState<string[]>([""])
  const [sum,setSum] =useState<number[]>([])
  const history=useHistory()
  const handleChangeIndex=()=>{
    history.push('/')
  }
  useEffect(()=>{
      chartdata.map((doc,index)=>{
        const dateLabel=doc.timestamp
        for(let i=0;i<label.length;i++){
          switch(label[i]){
            case "":
              setLabel([dateLabel])
              const newVal=Number(doc.expense)
              setSum([newVal])
              console.log(label,sum)
            break;
            case dateLabel:
              const val=sum.slice()
              const value=val[index]
              val[index]=value+Number(doc.expense)
              setSum(val)
              console.log(label,sum)
            break;
            default:
              const labelarray=label.slice()
              labelarray.push(dateLabel)
              setLabel(labelarray)
              const addVal=Number(doc.expense)
              const addSum=[...sum,addVal]
              setSum(addSum)
              console.log(label,sum)
            break;
          }
        }
      })
  },[])
  const graphData={
    labels:label,
    datasets:[
      {
        data:sum
      }
    ]
  }
  return (
    <div className="container">
      <a className="index-button" onClick={handleChangeIndex}>index</a>
      <div className="data-graph">
        <Bar data={graphData} />
      </div>
    </div>
  )
}

export default Chart

予想だと、マウントしたら、switch文で、case"":　に入り、labelに登録日の入った新しい配列が追加され、breakで終了する。
次の要素が呼ばれ、同じ登録日の場合、case dateLabel: に入り、違った場合、case default: に入り、要素を追加、変更になる。
だとおもいましたが、
結果のstateはlabelが[2021/4/9] sumが[6000]でした。

Answer 1

そもそもswitchを使っているのが可読性が悪く、何がしたいかもわかりにくく、バグの温床になっています。
やりたいことはtimestampによるgroup byとexpenseのsumだと思うので下のコードなどどうでしょう？

const sums = new Map<string,number>();
chartdata.forEach(doc => {
  sums[doc.timestamp] = sums.get(doc.timestamp, 0) + doc.expense;
})

console.log(sums["2021/4/9"]);
// 30332

setLabels(Array.from(sums.keys));
setSums(Array.from(sums.values));

Comments

[daaaiki]

とてもすっきりした書き方ができるんですね！勉強になりました！ありがとうございます。