常連

Vue.jsで Vuexとfirebaseを連携させてWebアプリケーションを作っているのですが
firebaseの読み取り回数が多すぎて困っています
1リロード1000件くらい行っているみたいです

家計簿アプリなのですが、毎回対象月以外の全データを引っ張ってくるとか、集計する毎回足し算しているとか, なんとなく心当たりはあるのですが、やはりこういうところでたくさん呼び出されるものでしょうか？

何かテクニック等あれば教えて欲しいです

ここ読めば書いてあるという情報でもありがたいです

よろしくお願いします

firebaseの読み取り回数を減らすテクニックを教えてください

### 実現したいこと
**TypeError: Cannot read property 'toDate' of nullを解決したい。**
![イメージ説明](6456c2c7c57adc8deb51f968a422ffde.png)
### 前提
Githubの草カレンダーをポートフォリオに実装したいです。
筋トレSNSアプリを作っていまして、firestoreからユーザーの筋トレ記録（簡単に言うと「何をどれだけやったか」です）を取得して配列の形でstateに詰め、react-calenderというライブラリに渡すことで実現したいと考えてます。
![イメージ説明](a4516328b80759e560dc9746d9126754.png)

### 発生している問題・エラーメッセージ
二枚目の写真の通り、データを取得して色塗りまではできたのですが、
データを登録するとき（二枚目の写真の左下の「Post」ボタンを押したとき）に一枚目のエラーが発生します。

エラー画面で更新すると、一枚目のように色塗りされていることが確認できます（エラー画面から正常な画面に移る）。
間違っているのがDateオブジェクトの扱い方なのか、useEffectの書き方なのか分からなくなってしまいました。
### 該当のソースコード

```UserTsx
import React, { useState, useEffect } from 'react'
import { auth, db } from "../../firebase";
import { useSelector } from "react-redux";
import { selectUser } from "../../features/userSlice";
import { selectProfileUser } from "../../features/profileUserSlice";
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import {
  Avatar,
  createStyles,
  makeStyles,
  Theme,
} from "@material-ui/core";
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";
import ReactTooltip from "react-tooltip";
import "./User.tsx.scss";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    large: {
      width: theme.spacing(9),
      height: theme.spacing(9),
    },
  }),
);
interface Commit {
  date: string;
  count: number;
}
const User:React.FC = () => {
  const classes = useStyles();
  const user = useSelector(selectUser);
  const profileUser = useSelector(selectProfileUser);
  const [ commits, setCommits ] = useState<Commit[]>([]);
  const [ commitUser, setCommitUser ] = useState("");

  useEffect(() => {
    // if (profileUser) {
    //   setCommitUser(profileUser.name);
    // } else {
    //   setCommitUser(user.displayName)
    // }
    const fetchDate = async() => {
      try{
        await db.collection("training_posts")
        .where("username", "==", "たらお@redux難しい")
        .onSnapshot((querySnapshot) => setCommits(
          querySnapshot.docs.map((doc) => ({
            date: doc.data().timestamp.toDate(),
            count: doc.data().training_array.length,
          }))
        ));
      } catch(err) {
        console.error(err);
      }
    }
    fetchDate();
  }, [])
  return (
    <div className="flex flex-col">
      <div className="flex items-center">
        <Avatar
          data-testid="avatar"
          className={classes.large}
          src={profileUser.avatar
            ? profileUser.avatar
            : user.photoUrl
          }
        />
        <h3 data-testid="profileUsername" className="font-bold text-xl text-white ml-5">
          {profileUser.name
            ? profileUser.name
            : user.displayName
          }
        </h3>
        <button
          data-testid="signOut"
          className="cursor-pointer bg-transparent border-none outline-none text-white"
          onClick={async () => {
            await auth.signOut();
          }}
        >
          <ExitToAppIcon/>
        </button>
      </div>
      <div className="mt-5 text-whiteSmoke">
        <CalendarHeatmap
          startDate={new Date(new Date().setDate(new Date().getDate() - 120))}
          endDate={new Date()}
          values={commits}
          classForValue={(value) => {
            if (!value) {
              return "color-empty";
            }
            return `color-scale-${value.count}`;
          }}
          tooltipDataAttrs={(value:any) => {
            if (!value || !value.date) {
              return null;
            }
            return {
              "data-tip": `${value.date} has count: ${
                value.count
              }`,
            };
          }}
        />
        <ReactTooltip/>
      </div>
      {/* <div>
        {commits.map((cm) => (
          <>
            <p>{cm.date}</p>
            <p>{cm.count}</p>
          </>
        ))}
      </div> */}
    </div>
  )
}

export default User
```
![イメージ説明](dd9aa62c0d6a52b1a0608a6b38b40ea5.png)

### 備考
react-calendar-heatmapの[repo](https://github.com/kevinsqi/react-calendar-heatmap)

Githubカレンダーを実装したいがCannot read property 'toDate' of nullが発生する

### 実現したいこと
成果物として簡単なTodoリストを作成しています。リストに追加する機能を作ったのですが、以下のようなエラーが出てしまいます。解消する方法を教えてください。
```
Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input (created by Form)
    in Form (created by Todo)
    in div (created by Todo)
    in Todo (created by App)
    in App

```

以下はソースコードです。
```
import * as React from 'react';

import Btn from '../presentational/atoms/Btn';
import Form from '../presentational/atoms/Form';
import List from '../presentational/atoms/List';

interface IState {
    count: number;
    todos: Array;
    value: string;
}

export default class Todo extends React.Component<{}, IState> {

    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            todos: [],
            value: ''
        }
    }

    addTodo = () => {
        const {todos, value } = this.state;
        this.setState({
            todos: [...todos, value]
        })
    }

    changeValue = (e) => {
        this.setState({
            value: e.target.value
        })
    }

    render() {
        return(
            <>
                <div className="l-flex">
                    <Form onInputFunction={this.changeValue} value={this.state.value} />
                    <Btn text="ADD!" onClickFunction={this.addTodo} />
                </div>
                <List todos={this.state.todos}/>
            </>
        );
    }
}
```
```
import * as React from 'react';

const Form = (props) => {
    return(
        <>
            <input type="text" onInput={props.onInputFunction} value={props.value} name="todo" className="form" />
        </>
    );
}

export default Form;
```

Reactでfailed prop typeというエラーを解消したいです。

### 前提・実現したいこと
＜できていること＞
vueで作ったアンケート送信の際に同時にタイムスタンプ型で日にちデータをfirebase/firestoreへ登録した。
データをvuetifyのデータテーブルに表示してみると、文字列や数値データはうまく表示できているのに、日にちデータはtimestamp(seconds=****)~~~となってしまう。
取得時にDate()をつけてみたら日にちデータはうまく表示できたけれど、文字列データの方がおかしくなってしまった。

＜実現したいこと＞
文字列や数値データはそのままに、タイムスタンプだけを日にちの形にしたい

### 発生している問題・エラーメッセージ

```
timestamp型のデータを文字列にもdate型にも変換する方法がわからない
```

### 該当のソースコード

```output
methods: {
    register () {
      const now = new Date()

      db.collection('form1').add({
        user: this.select,
        anke_1: this.anke1,
        anke_2: this.anke2,
        anke_3: this.anke3,
        anke_4: this.anke4,
        anke_5: this.anke5,
        createdAt: now
      })
```
```input
    <v-data-table
      :headers="headers"
      :items="items"
      :items-per-page="10">
      class="elevation-1"
    ></v-data-table>
{中略}
  created () {
    firebase.firestore().collection('form1')
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          this.items.push(doc.data())
        })
      })
  },
```

### 試したこと

qiita等で一通り調べてみました。date()などを使うと良いということはわかったのですが、どこに書けば良いのかわかっていない
### 補足情報（FW/ツールのバージョンなど）

vueを使用
nodeのバージョン  12.13.0
データベースはfirebaseのfirestoreを使用、コレクション名はform1

firebaseから日にちを取得したい

reactでECサイトのポートフォリオを作成しています。
商品一覧ページで商品名をクリックしたら商品詳細ページに飛ぶようにしようと考えています。
以下のように実装したところ商品詳細ページに飛んだ時にエラーが出てしまいます。
コンソールログで確認したところpropsの形で渡したdocがうまく読み込めていないようです。
どのようにすればリンク先にpropsを渡すことができるでしょうか？

```react
import React,{useState} from "react";
import {Link} from "react-router-dom";
import PageButton from "./PageButton";

export default function GameInfo(props){
  const [count, setCount] = useState(0);
  return(
    <div>
      <ul>
        <div className="game-container">
        {props.gameDoc.slice(count*10, count*10+10).map((doc, index) =>
          <li className="game-image" key={index} style={{marginBottom:"30px", display:"flex"}}>
            <img src={doc.photo} alt="not image" height="220px" width="330px"/>
            <div className="game-info" style={{marginLeft:"30px"}}>
              {/*ここのリンクについて質問*/}
              <Link to="/Detail" game={doc}><h1>{doc.name}</h1></Link>
              <p>price: ¥{doc.price}</p>
            </div>
          </li>)
        }
        </div>
      </ul>
      <PageButton gameDoc={props.gameDoc} count={count} setCount={setCount}/>
    </div>
  )
}
```
リンク先のページ(Detail)のコンソールログでprops.gameがundefinedとなっているためpropsで渡したdocがうまく読み込めていないと考えております。
```Detail
import React from "react";
import {Button} from "@material-ui/core"; 

function Detail(props) {
  console.log(props.game);
  return (
    <div>
      <img src={props.game.photo} alt="not image" />
      <h1>{props.game.name}</h1>
      <p>{props.game.detail}</p>
      <p>{props.game.category}</p>
      <p>{props.game.price}</p>
    </div>
  );
}
export default Detail;
```