毎度失礼いたします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仕様にして、チャット機能を実装したいのですが、保存は成功しているのですが
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;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/19 18:43
2018/04/19 21:11
2018/04/20 07:58
2018/04/20 07:58
2018/04/21 00:02
2018/04/21 00:03
2018/04/21 00:11