質問編集履歴
3
ソースコードを追記して、指摘箇所を訂正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,14 +7,23 @@
|
|
|
7
7
|
[gifted chatでmessageをDBからFetchしたい（react native）](https://teratail.com/questions/122414)
|
|
8
8
|
|
|
9
9
|
#### 実現したいこと＆困っていること
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
ReferenceError: message is not defined
|
|
13
|
+
```
|
|
14
|
+
Message.jsの`messages: GiftedChat.append(previousState.messages, message),`でつっかえています。ここには、既にFirebaseに保存されているデータベースが取ってこれるはずなのですが、このmessageを取ってくることができなくて困っています。
|
|
15
|
+
|
|
16
|
+
|
|
10
17
|
[こちらのソースコード](https://github.com/FaridSafi/ChatApp)をRedux仕様にして、チャット機能を実装したいのですが、保存は成功しているのですが
|
|
11
18
|
|
|
12
19
|
|
|
13
20
|
|
|
14
|
-
Fetchがうまくいきません。
|
|
15
|
-
参考コードに忠実にしたがっているのですが、やはりmessageをfetchできません。
|
|
16
|
-
|
|
21
|
+
message2は下記のコンソール情報が取ってこれています。
|
|
17
22
|
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
ここのvalueを一つずつmessageの中にsetStateしてあげたいのですが＞＜
|
|
26
|
+
|
|
18
27
|
#### ソースコード
|
|
19
28
|
|
|
20
29
|
> Message.js
|
|
@@ -29,6 +38,7 @@
|
|
|
29
38
|
const room = this.props.navigation.state.params.room;
|
|
30
39
|
this.props.messagesFetch(room);
|
|
31
40
|
|
|
41
|
+
console.log('message3, message);
|
|
32
42
|
this.setState((previousState) => {
|
|
33
43
|
return {
|
|
34
44
|
messages: GiftedChat.append(previousState.messages, message),
|
|
@@ -135,13 +145,70 @@
|
|
|
135
145
|
};
|
|
136
146
|
```
|
|
137
147
|
|
|
138
|
-
|
|
148
|
+
> messageReducer.js
|
|
139
149
|
|
|
140
|
-
|
|
150
|
+
```JavaScript
|
|
151
|
+
type uiActions = {
|
|
152
|
+
type: 'messages_fetch_success',
|
|
153
|
+
}
|
|
141
154
|
|
|
142
|
-
componentDidMountを排除し、componentWillMountを使うことにしました。
|
|
143
|
-
|
|
155
|
+
const initialState = {};
|
|
144
156
|
|
|
157
|
+
export default (state = initialState, action) => {
|
|
158
|
+
switch (action.type) {
|
|
145
|
-
|
|
159
|
+
case 'messages_fetch_success':
|
|
160
|
+
return action.payload;
|
|
161
|
+
default:
|
|
162
|
+
return state;
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
```
|
|
146
166
|
|
|
167
|
+
> messageFormReducer.js
|
|
168
|
+
|
|
169
|
+
```
|
|
170
|
+
/**
|
|
171
|
+
* @flow
|
|
172
|
+
*
|
|
173
|
+
* Manages the state of all Message Form components which rely on Redux
|
|
174
|
+
*/
|
|
175
|
+
|
|
176
|
+
type uiActions = {
|
|
177
|
+
type: 'message_update',
|
|
147
|
-
|
|
178
|
+
type: 'message_create,'
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
const initialState = {
|
|
182
|
+
text: '',
|
|
183
|
+
user: '',
|
|
184
|
+
createdAt: '',
|
|
185
|
+
_id: '',
|
|
186
|
+
roomId: ''
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
export default (state = initialState, action) => {
|
|
190
|
+
switch(action.type) {
|
|
191
|
+
case 'message_update':
|
|
192
|
+
return { ...state, [action.payload.prop]: action.payload.value };
|
|
193
|
+
case 'message_create':
|
|
194
|
+
return initialState;
|
|
195
|
+
default:
|
|
196
|
+
return state;
|
|
197
|
+
}
|
|
198
|
+
};
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
> store.js
|
|
202
|
+
|
|
203
|
+
```
|
|
204
|
+
const rootReducer = combineReducers({
|
|
205
|
+
messages: messageReducer,
|
|
206
|
+
messageForm: messageFormReducer
|
|
207
|
+
});
|
|
208
|
+
|
|
209
|
+
const store = createStore(
|
|
210
|
+
rootReducer,
|
|
211
|
+
applyMiddleware(reduxThunk)
|
|
212
|
+
);
|
|
213
|
+
export default store;
|
|
214
|
+
```
|
2
ソースコードの修正、エラーの詳細を追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
react nativeでチャット投稿を実現したいと思っています。
|
|
4
4
|
（これで3回目の質問になります。）
|
|
5
5
|
|
|
6
|
-
[Firebaseでチャット機能を実現したい（react native）](https://teratail.com/questions/
|
|
6
|
+
[Firebaseでチャット機能を実現したい（react native）](https://teratail.com/questions/121827)
|
|
7
|
-
)
|
|
8
7
|
[gifted chatでmessageをDBからFetchしたい（react native）](https://teratail.com/questions/122414)
|
|
9
8
|
|
|
10
9
|
#### 実現したいこと＆困っていること
|
|
@@ -26,16 +25,16 @@
|
|
|
26
25
|
messages: [],
|
|
27
26
|
}
|
|
28
27
|
|
|
29
|
-
|
|
28
|
+
componentWillMount() {
|
|
29
|
+
const room = this.props.navigation.state.params.room;
|
|
30
|
-
this.props.messagesFetch(
|
|
30
|
+
this.props.messagesFetch(room);
|
|
31
|
-
|
|
31
|
+
|
|
32
|
-
|
|
32
|
+
this.setState((previousState) => {
|
|
33
|
-
|
|
33
|
+
return {
|
|
34
|
-
|
|
34
|
+
messages: GiftedChat.append(previousState.messages, message),
|
|
35
|
-
|
|
35
|
+
};
|
|
36
|
-
});
|
|
37
36
|
});
|
|
38
|
-
}
|
|
37
|
+
}
|
|
39
38
|
|
|
40
39
|
onSend = (message) => {
|
|
41
40
|
const room = this.props.navigation.state.params.room;
|
|
@@ -127,7 +126,6 @@
|
|
|
127
126
|
.once('value', snapshot => {
|
|
128
127
|
const message = snapshot.val();
|
|
129
128
|
return message;
|
|
130
|
-
console.log('message1', message);
|
|
131
129
|
})
|
|
132
130
|
.then(message => {
|
|
133
131
|
dispatch({ type: 'messages_fetch_success', payload: message });
|
|
@@ -137,4 +135,13 @@
|
|
|
137
135
|
};
|
|
138
136
|
```
|
|
139
137
|
|
|
140
|
-
meesage1, message2は取れて来ていますが、message3はエラーすら出ません（無視されている？）
|
|
138
|
+
meesage1, message2は取れて来ていますが、message3はエラーすら出ません（無視されている？）
|
|
139
|
+
|
|
140
|
+
#### 追記
|
|
141
|
+
|
|
142
|
+
componentDidMountを排除し、componentWillMountを使うことにしました。
|
|
143
|
+
message2は下記のコンソール情報が取ってこれています。
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
ここのvalueを一つずつmessageの中にsetStateしてあげたいのですが＞＜
|
1
プライベートな情報を排除しました！
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
毎度失礼いたしますmm
|
|
2
2
|
|
|
3
3
|
react nativeでチャット投稿を実現したいと思っています。
|
|
4
|
-
（これで3回目の質問になります。
|
|
4
|
+
（これで3回目の質問になります。）
|
|
5
5
|
|
|
6
6
|
[Firebaseでチャット機能を実現したい（react native）](https://teratail.com/questions/122414
|
|
7
7
|
)
|