なんども本当にすみませんmm
こちらのご指摘をいただきまして、ようやくmessages自体を表示することはできているのですが、バグが生じておりまして、完全にできていません。。
エラー&困っていること
データベースに入っているデータは表示されたかと思ったのですが...
エラー内容
Warning: rendering invalid section, row: 0, 0 Warning: rendering invalid section, row: 0, 1 Warning: rendering invalid section, row: 0, 2 ・・・ ExceptionsManager.js:73 Warning: Encountered two children with the same key, `.1:$r_s1_undefined`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
2点ほどおかしい点があります。
・同じ内容のmessageデータしか表示できていない
・通常、データベースに入っている数の倍乗のデータが表示されている
setStateしているmessagesに問題があるのでしょうか・・・
ソースコード
JavaScript
1class Message extends React.Component { 2 static navigationOptions = ({ navigation }) => { 3 return { 4 headerTitle: `${navigation.state.params.room.user.name}`, 5 headerLeft: ( 6 <TouchableOpacity 7 onPress={()=> navigation.goBack()} 8 style={styles.headerIcon} 9 > 10 <Icon name='chevron-left' size={28} style={{color: '#fff'}}/> 11 </TouchableOpacity> 12 ), 13 headerStyle: { 14 backgroundColor: Theme.PRIMARY, 15 }, 16 headerTitleStyle: { 17 color: '#fff', 18 fontWeight: 'bold' 19 } 20 }; 21 }; 22 23 constructor(props) { 24 super(props); 25 this.state = { 26 messages: [], 27 }; 28 } 29 30 componentWillMount() { 31 const room = this.props.navigation.state.params.room; 32 this.props.messagesFetch(room); 33 34 this.createDataSource(this.props); 35 } 36 37 onSend(message) { 38 const room = this.props.navigation.state.params.room; 39 this.setState((previousState) => ({ 40 messages: GiftedChat.append(previousState.messages, message), 41 })); 42 43 this.props.sendMessage({ 44 message, 45 room 46 }) 47 } 48 49 componentWillReceiveProps(nextProps) { 50 this.createDataSource(nextProps); 51 } 52 53 createDataSource({ messages }) { 54 const ds = new ListView.DataSource({ 55 rowHasChanged: (r1, r2) => r1 !== r2 56 }); 57 58 this.dataSource = ds.cloneWithRows(messages); 59 console.log('messages', messages); 60 61 // messagesを置く場所を間違えている? 62 this.setState({ messages }); 63 } 64 65 render() { 66 const { currentUser } = firebase.auth(); 67 return ( 68 <Screen> 69 <GiftedChat 70 messages={this.state.messages} 71 onSend={this.onSend.bind(this)} 72 user={{ 73 _id: currentUser.uid 74 }} 75 renderBubble={this.renderBubble} 76 renderSend={this.renderSend} 77 /> 78 </Screen> 79 ); 80 } 81}
上のコンソールログでは下記の結果が返ってきているのですが。。
ListViewにするのが間違っているのでしょうか?
そのエラーはどのタイミングで生じているのでしょうか?初期表示の段階で?`onSend`などもコードでみられますが、それが実行された後にエラーが出るとかでなければ、今回の質問に不要な部分は削ったミニマムなコードに修正することは可能ですか?逆に、reduxとの繋がりが今のコードで見えないので、その辺は省かずに入れた方がわかりやすいです。reducerやstoreのコードは不要です。
> ListViewにするのが間違っているのでしょうか?
そもそも、render部分でListViewは使っていないですよね?datasource作っている割にそれをどこにも使っていなかったりしますし。
ListView周りのコードを削っても今と変わらないのでは?GiftedChatコンポーネントがうまいことリスト表示をしてくれるということなのではないですか?このライブラリを使ったことがないので詳細はわからないですが。
ちなみに、ListViewはdeprecatedです。https://facebook.github.io/react-native/docs/listview.html
回答1件
あなたの回答
tips
プレビュー