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

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

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

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

React.js

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

Q&A

解決済

1回答

1018閲覧

realtime databaseにpushできない

tsugumi_7788

総合スコア31

Firebase

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

React.js

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

0グッド

0クリップ

投稿2020/06/29 10:49

記入フォームのコード

react.js

1const INITIAL_SCORE_DATA = { 2 score: 0, 3 date: '', 4 type: '', 5}; 6 7 8 9class InputData extends Component { 10 constructor(props){ 11 super(props); 12 this.state = {...INITIAL_SCORE_DATA}; 13 } 14 15 onChange = event => { 16 this.setState({ [event.target.name]: event.target.value }); 17 }; 18 19 onCreateData = event => { 20 const authUser = JSON.parse(localStorage.getItem('authUser')); 21 this.props.firebase.scores(authUser.uid).push({ 22 date: this.state.date, 23 type: this.state.type, 24 score: this.state.score, 25 }); 26 this.setState({...INITIAL_SCORE_DATA}); 27 event.preventDefault(); 28 } 29 30 31 render() { 32 const { score, date, type } = this.state; 33 34 const isInvalid = score === 0 || date === '' || type === ''; 35 36 return ( 37 <div> 38 <h1>InputData</h1> 39 <form onSubmit={this.onCreateData}> 40 <input 41 type='text' 42 name='type' 43 value={type} 44 onChange={this.onChange}/> 45 <input 46 type='text' 47 name='date' 48 value={date} 49 onChange={this.onChange}/> 50 <input 51 type='number' 52 name='score' 53 value={score} 54 onChange={this.onChange}/> 55 <button disabled={isInvalid} type='submit'>Submit Data</button> 56 </form> 57 </div> 58 ) 59 } 60} 61

firebaseのdatabase.ref関数のコード一部

react.js

1 members = uid => this.db.ref(`groups/${uid}/members`); 2 3 member = (uid, memberId) => this.db.ref(`groups/${uid}/members/${memberId}`); 4 5 scores = uid => this.db.ref(`groups/${uid}/scores`);

members, member関数は別コンポーネントで使用していて正常に動きます。scoresが動かないです…。コードは基本的に同じなのですがさっぱりです。どのような可能性が考えられますか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

InputDataはある親の子コンポーネントなのですがその親の親でfirebase関連の関数をpropsにわたしていました。それだとInputDataにはpropsとしてわたっていなかったようです…。

投稿2020/06/29 10:59

tsugumi_7788

総合スコア31

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問