前提・実現したいこと
React Nativeで開発を行なっています。
CommentIndex.jsにあるthis.state.pickを、CommentItem.jsこのコンポーネントに渡したいと考えているのですが、
this.state.pickがUndefinedになってしまいます。
該当のソースコード
以下コードの全文になります
CommentIndex.js
js
1export default class CommentIndex extends Component<{}> { 2 3 constructor(props) { 4 super(props); 5 6 this.state = { 7 list: [], 8 pick: '' 9 }; 10 } 11 12 _onPress = (text) => { 13 const list = [].concat(this.state.list); 14 15 list.push({ 16 key: Date.now(), 17 text: text, 18 done: false, 19 }); 20 21 this.setState({ 22 list, 23 }); 24 } 25 26 27 render() { 28 const { 29 list, 30 pick, 31 } = this.state; 32 33 var data = [["User1", "User2", "User3"],]; 34 35 return ( 36 <View style={styles.container}> 37 <Text>あなたの仲間の行動を紹介しよう</Text> 38 <View style={styles.main}> 39 <View style={styles.post}> 40 <View style={styles.dropdown}> 41 <View style={{height: 0}} /> 42 <DropdownMenu 43 style={{flex: 1}} 44 bgColor={'white'} 45 tintColor={'#666666'} 46 activityTintColor={'green'} 47 handler={(selection,row) => this.setState({pick: data[selection][row]})} 48 data={data} 49 > 50 <View style={styles.user}> 51 { this.state.pick === 'User1' && <User1_photo /> } 52 { this.state.pick === 'User2' && <User2_photo /> } 53 { this.state.pick === 'User3' && <User3_photo /> } 54 </View> 55 </DropdownMenu> 56 </View> 57 <View style={styles.postinput}> 58 <CommentInput onPress={this._onPress} /> 59 </View> 60 </View> 61 <View style={styles.CommentListContainer}> 62 <FlatList 63 style={styles.CommentList} 64 data={list} 65 renderItem={({ item }) => <CommentItem {...item} />} 66 /> 67 </View> 68 </View> 69 </View> 70 ); 71 } 72}
CommentItem.js
js
1const CommentItem = (props) => { 2 const { 3 text, 4 } = props; 5 6 7 return ( 8 <View style={styles.container}> 9 <Text>{this.props.pick}</Text> 10 <View style={styles.left}> 11 <Text style={styles.text} >{text}</Text> 12 </View> 13 <ApplauseButton /> 14 </View> 15 ); 16} 17 18export default CommentItem; 19
propsの渡し方にどこか問題はありますでしょうか?
アドバイスいただけたら幸いです。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/11 02:18