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

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

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

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

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

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

Q&A

解決済

1回答

1948閲覧

firebaseで配列の単体をfetchできない(react native)

yamady

総合スコア176

Firebase

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

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

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

0グッド

1クリップ

投稿2018/04/18 20:52

編集2018/04/20 07:57

毎度失礼いたしますmm

react nativeでチャット投稿を実現したいと思っています。
(これで3回目の質問になります。)

Firebaseでチャット機能を実現したい(react native)
gifted chatでmessageをDBからFetchしたい(react native)

実現したいこと&困っていること

ReferenceError: message is not defined

Message.jsのmessages: GiftedChat.append(previousState.messages, message),でつっかえています。ここには、既にFirebaseに保存されているデータベースが取ってこれるはずなのですが、このmessageを取ってくることができなくて困っています。

こちらのソースコードをRedux仕様にして、チャット機能を実装したいのですが、保存は成功しているのですが

Firebase保存画面

message2は下記のコンソール情報が取ってこれています。

イメージ説明

ここのvalueを一つずつmessageの中にsetStateしてあげたいのですが><

ソースコード

Message.js

JavaScript

1class Message extends React.Component { 2 state = { 3 messages: [], 4 } 5 6 componentWillMount() { 7 const room = this.props.navigation.state.params.room; 8 this.props.messagesFetch(room); 9 10 console.log('message3, message); 11 this.setState((previousState) => { 12 return { 13 messages: GiftedChat.append(previousState.messages, message), 14 }; 15 }); 16 } 17 18 onSend = (message) => { 19 const room = this.props.navigation.state.params.room; 20 this.props.sendMessage({ 21 message, 22 room 23 }); 24 } 25 26 renderBubble(props) { 27 return ( 28 <Bubble 29 {...props} 30 wrapperStyle={{ 31 right: { 32 backgroundColor: Theme.SECONDARY 33 } 34 }} 35 /> 36 ) 37 } 38 39 renderSend(props) { 40 return ( 41 <Send 42 {...props} 43 textStyle={{ 44 color: Theme.SECONDARY 45 }} 46 /> 47 ); 48 } 49 50 render() { 51 const { currentUser } = firebase.auth(); 52 return ( 53 <Screen> 54 <GiftedChat 55 messages={this.state.messages} 56 onSend={this.onSend.bind(this)} 57 user={{ 58 _id: currentUser.uid 59 }} 60 renderBubble={this.renderBubble} 61 renderSend={this.renderSend} 62 /> 63 </Screen> 64 ); 65 } 66} 67 68const mapStateToProps = (state) => { 69 const { text, user, createdAt, _id } = state.messageForm; 70 return { text, user, createdAt, _id }; 71}; 72 73export default connect(mapStateToProps, { 74 sendMessage, 75 messagesFetch 76})(Message);

redux/messageActions.js

JavaScript

1/** 2* Builds an action to request 3*/ 4export const sendMessage = ({ message, room }) => { 5 const { currentUser } = firebase.auth(); 6 return (dispatch) => { 7 firebase.database().ref(`/rooms/${room.roomId}/messages/`) 8 .push({ 9 text: message[0].text, 10 user: message[0].user, 11 createdAt: firebase.database.ServerValue.TIMESTAMP, 12 }) 13 .then(() => { 14 dispatch({ type: 'message_create' }); 15 }); 16 } 17} 18 19/** 20* Builds an action to notification fetch action 21*/ 22export const messagesFetch = (room) => { 23 return (dispatch) => { 24 firebase.database().ref(`/rooms/${room.roomId}/messages/`) 25 .once('value', snapshot => { 26 const message = snapshot.val(); 27 return message; 28 }) 29 .then(message => { 30 dispatch({ type: 'messages_fetch_success', payload: message }); 31 console.log('message2', message); 32 }); 33 }; 34};

messageReducer.js

JavaScript

1 type uiActions = { 2 type: 'messages_fetch_success', 3 } 4 5 const initialState = {}; 6 7 export default (state = initialState, action) => { 8 switch (action.type) { 9 case 'messages_fetch_success': 10 return action.payload; 11 default: 12 return state; 13 } 14 };

messageFormReducer.js

/** * @flow * * Manages the state of all Message Form components which rely on Redux */ type uiActions = { type: 'message_update', type: 'message_create,' } const initialState = { text: '', user: '', createdAt: '', _id: '', roomId: '' }; export default (state = initialState, action) => { switch(action.type) { case 'message_update': return { ...state, [action.payload.prop]: action.payload.value }; case 'message_create': return initialState; default: return state; } };

store.js

const rootReducer = combineReducers({ messages: messageReducer, messageForm: messageFormReducer }); const store = createStore( rootReducer, applyMiddleware(reduxThunk) ); export default store;

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

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

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

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

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

guest

回答1

0

ベストアンサー

ComoponentDidMountが効いていないように思います

というのは、具体的にどういった状況を表しているのですか?

meesage1, message2は取れて来ていますが、message3はエラーすら出ません(無視されている?)

このコードで本当にmessage1message2ってログで取れてますか?

componentDidMount() { this.props.messagesFetch((message) => { console.log('message3', message); this.setState((previousState) => { return { messages: GiftedChat.append(previousState.messages, message), }; }); }); };

というのも、redux/messageActions.jsを見る限り、messagesFetch関数が取る引数はroomオブジェクトのようですが、componentDidMount内でのmessagesFetch関数の呼び出しでは関数オブジェクトを引数に渡していますよね?

それと、これは単なる確認ですが、redux/messageActions.jsを見る限り、利用しているmiddlewareはredux-thunkっぽいですが、それで合っていますか?

追記1

return message; console.log('message1', message);

いや、console.logの前にreturnしているので、message1は間違いなくログで取れないですよね?
今一度、状況を整理して質問内容を見直した方が良さそうですよ。

追記2

追記の内容を確認いたしました。

message3はエラーすら出ませんと当初ありましたが、編集後のコードのどこでmessageを参照したいのですか?

質問内容をわかりやすくするために、引き続き、console.log(message3)をコード内に入れてください。

.then(message => { dispatch({ type: 'messages_fetch_success', payload: message }); console.log('message2', message); });

messageFetch()関数の中でdispatchしていますが、ここでstoreに入れたものはMessage.jsのどこで取得していますか?

const mapStateToProps = (state) => { const { text, user, createdAt, _id } = state.messageForm; return { text, user, createdAt, _id }; };

ここで先ほどのところでdispatchしたmessage、またはmessagesを既に取っているのでしょうか?
取っていないのであれば、Messageコンポーネントの中でmessageを参照出来ないですよね。

必要であれば、{ type: 'messages_fetch_success', payload: message }に対応しているreducerのコードも追記してください。不要そうであれば、そちらのコードの追記も不要です。

追記3

componentWillMount() { const room = this.props.navigation.state.params.room; this.props.messagesFetch(room); console.log('message3, message); this.setState((previousState) => { return { messages: GiftedChat.append(previousState.messages, message), }; }); }

とりあえず、componentWillMount内でthis.props.messagesFetch(room)している訳ですから、このライフサイクルメソッド内でconsole.log('message3, message)のようにmessageを参照しようとしても、まだ、reduxのstoreにmessage入っていないので参照出来ません。このコンポーネント内で参照できるようになるのは、componentWillReceiveProps以降のライフサイクルメソッドです。

次に、そもそものところで、追記2にも書きましたが、mapStateToProps内でmessageを取ってないですよね。

const mapStateToProps = (state) => { const { text, user, createdAt, _id } = state.messageForm; return { text, user, createdAt, _id }; };

というか話は少し本題からずれますが、ここで参照しているtextやら userやらは、Messageコンポーネント内で一切使っていなくないですか?

前提として、reduxをどれくらい理解されてますでしょうか?

投稿2018/04/18 21:36

編集2018/04/20 09:04
HayatoKamono

総合スコア2415

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

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

yamady

2018/04/19 18:43

ご丁寧な回答本当にありがとうございます。 いただいた指摘の箇所を今一度、確認して質問内容を修正してまいりますm(_ _)m
yamady

2018/04/19 21:11

> それと、これは単なる確認ですが、redux/messageActions.jsを見る限り、利用しているmiddlewareはredux-thunkっぽいですが、それで合っていますか? こちらその通りです!
yamady

2018/04/20 07:58

> Hayatoさま 回答を編集して、ご指南いただきありがとうございます。質問内容にご指摘いただいた内容などを追記させていただきました。
yamady

2018/04/20 07:58

分かりづらくてすみません。。
yamady

2018/04/21 00:02

ご指摘をいただきまして、ありがとうございます。 一旦、前には進めたようなので、また論点が変わってしまうと思うので 別で質問させていただきます。 いつも非常に助かります。
HayatoKamono

2018/04/21 00:03

OKです!一つずつ問題点疑問点を潰しながら前に進めていけると良いですね!
yamady

2018/04/21 00:11

reduxなど、ご指摘の通り、曖昧なまま進んでしまってきた感が否めません・・・。精進します!ありがとうございます(_ _)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問