Firebaseから、指定したカラム(作成日)の昇順でFetchしたいと考えています。
こちら公式のドキュメントにあるように、orderByKey()や、orderByChild()を使ってみたのですが、思った通りに表示されずに困っています。
エラー&ソースコード
(1) reduxでconsole.log()をしてみると、順番通りにsnapshotが取ってこれているのですが、
JavaScript
1export const messagesFetch = (room) => { 2 return (dispatch) => { 3 firebase.database().ref(`/rooms/${room.roomId}/messages`) 4 .orderByChild('createdAt') 5 .on('value', snapshot => { 6 console.log('順番(messageActions.js)', snapshot) 7 dispatch({ type: 'messages_fetch_success', payload: snapshot.val() }); 8 }) 9 }; 10};
順番(messageActions.js) Snapshot {key: "messages", ref: Reference, _value: {…}, _priority: null, _childKeys: Array(5)} key: "messages" ref: Reference {_module: Database, path: "/rooms/XXXXXX/messages", _promise: null, _refListeners: {…}, _database: Database, …} _childKeys:(5) ["-LAuoHzKSCT2hux0TC1O", "-LAuoLwIMD-523OpNrQi", "-LAuoOGawyAVT3ln5j6m", "-LAuoS2QjGhs6NtjAPv_", "-LAusvIn-gyO4ZYNAZ7Z"] _value: - LAuoHzKSCT2hux0TC1O: - createdAt:"2018/04/24 20:20" - text:"1番初めのメッセージです" - LAuoLwIMD-523OpNrQi: - createdAt: "2018/04/24 20:20" - text: "2番目のメッセージです" - LAuoOGawyAVT3ln5j6m: - createdAt: "2018/04/24 20:21" - text: "3番目のメッセージです" -LAuoS2QjGhs6NtjAPv_: - createdAt: "2018/04/24 20:21" - text: "4番目のメッセージです" -LAusvIn-gyO4ZYNAZ7Z: - createdAt: "2018/04/24 20:40" - text:"5番目のメッセージです"
(2) MAessage.jsの方へfetchされた時に"どういうルールか分からない"順番でソートされます。最初_idかと思ったのですが、よく見ると違い、uidでもなさそうです。分かりません。
JavaScript
1class Message extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state = { 5 messages: [], 6 }; 7 } 8 9 componentWillMount() { 10 const room = this.props.navigation.state.params.room; 11 this.props.messagesFetch(room); 12 } 13 14 render() { 15 const { currentUser } = firebase.auth(); 16 console.log('順番(Message.js)', this.props.messages); 17 return ( 18 <Screen> 19 <GiftedChat 20 messages={this.props.messages} 21 onSend={this.onSend.bind(this)} 22 user={{ 23 _id: currentUser.uid 24 }} 25 renderBubble={this.renderBubble} 26 renderSend={this.renderSend} 27 /> 28 </Screen> 29 ); 30 } 31} 32 33const mapStateToProps = (state) => { 34 const messages = _.map(state.messages, (val, uid) => { 35 return { ...val, uid }; 36 }); 37 38 return messages; 39}; 40 41export default connect(mapStateToProps, { 42 messagesFetch 43})(Message);
順番(Message.js) (5) [{…}, {…}, {…}, {…}, {…}] 0: {user: {…}, createdAt: "2018/04/24 20:21", _id: 1524626462186, text: "3番目のメッセージです", uid: "-LAuoOGawyAVT3ln5j6m"} 1: {user: {…}, createdAt: "2018/04/24 20:21", _id: 1524626477639, text: "4番目のメッセージです", uid: "-LAuoS2QjGhs6NtjAPv_"} 2: {user: {…}, createdAt: "2018/04/24 20:40", _id: 1524627650612, text: "5番目のメッセージです", uid: "-LAusvIn-gyO4ZYNAZ7Z"} 3: {user: {…}, createdAt: "2018/04/24 20:20", _id: 1524626436230, text: "1番初めのメッセージです", uid: "-LAuoHzKSCT2hux0TC1O"} 4: {user: {…}, createdAt: "2018/04/24 20:20", _id: 1524626452866, text: "2番目のメッセージです", uid: "-LAuoLwIMD-523OpNrQi"}length: 5__proto__: Array(0)
回答1件
あなたの回答
tips
プレビュー