質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

受付中

TypeError: Cannot read properties of null (reading 'add')を改善したい

edu
edu

総合スコア30

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0回答

0評価

0クリップ

1264閲覧

投稿2022/03/09 01:31

編集2022/05/27 09:55

解決したいこと

検証ツールに、表示される『TypeError: Cannot read properties of null (reading 'add')』を改善したいです。

試したこと
エラーメッセージを見ると、「null のプロパティは読めません(add を読むとき)。」で、
この場合、firestore が null の可能性が高いので、
『firestore が正しくインスタンスされているかを確認する』とまではわかるのですが、
下記のコードを何を書き換えたら、firesotreが正しくインスタンスされるのかがわかりません。

何方かアドバイスをお願いします。

firebase.js

import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", measurementId: "", }; export const firebaseApp = initializeApp(firebaseConfig); export const auth = getAuth(firebaseApp); export const firestore = getFirestore(firebaseApp);
import React, { useContext, useState } from "react"; import { connect } from "react-redux"; import { addTodos } from "../redux/reducer"; import { Box, TextField, Button } from "@mui/material"; import { AuthContext } from "../auth/AuthProvider"; import { useFirestoreConnect, useFirestore } from "react-redux-firebase"; const mapStateToProps = (state) => { return { todos: state?.todos, }; }; const mapDispatchToProps = (dispatch) => { return { addTodo: (obj) => dispatch(addTodos(obj)), }; }; const Todos = (props) => { const { count, setCount } = props; const [todo, setTodo] = useState(""); // Contextからログインユーザを取得 const { currentUser } = useContext(AuthContext); const handleChange = (e) => { setTodo(e.target.value); }; const [num, setNum] = useState(100); const firestore = useFirestore(); const onCountUp = () => { setCount(count + num); //エラーの該当箇所 return firestore.add("senders", { idCount: 1, item: todo, count: 0, }); }; const onCountDown = () => { setCount(count - num); return firestore.add("senders", { idCount: 1, item: todo, count: 0, }); }; useFirestoreConnect({ collection: "senders", where: [["todo", "==", "0"]], }); const addTodo = () => { return firestore.add("addTodo", { idCount: 1, item: todo, completed: false, balance: 0, }); }; useFirestoreConnect({ collection: "addTodo", where: [["todo", "==", "0"]], }); const add = () => { if (todo === "") { alert("Input is Empty"); } else { props.addTodo({ id: Math.floor(Math.random() * 1000), item: todo, completed: false, balance: 0, }); setTodo(""); } }; return ( <> <div style={{ textAlign: "center" }}> <div className="balance-list"> <h2> {currentUser?.displayName ?? "未ログイン"} さんの残高 : {count} 円{" "} </h2> <Box component="form" sx={{ "& > :not(style)": { m: 1, width: "25ch" }, }} noValidate autoComplete="off" > <TextField label="入出金額" variant="outlined" value={num} onChange={(e) => setNum(Number(e.target.value))} /> </Box> <Button onClick={onCountUp} variant="outlined" color="primary"> Increment </Button> <Button onClick={onCountDown} variant="outlined" color="secondary"> Decrement </Button> </div> <div className="addTodos"> <h2>受取人一覧</h2> <Box component="form" sx={{ "& > :not(style)": { m: 1, width: "25ch" }, }} noValidate autoComplete="off" > <TextField id="outlined-basic" label="受取人を入力してください" variant="outlined" type="text" onChange={(e) => handleChange(e)} className="todo-input" value={todo} /> </Box> <Button variant="outlined" color="primary" className="add-btn" onClick={() => add()} > 受取人追加 </Button> <br /> <h2>受取人名</h2> </div>{" "} </div> </> ); }; export default connect(mapStateToProps, mapDispatchToProps)(Todos);

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。