お世話になっております。
React Nativeでアプリを作っています。
アイテムの詳細画面から編集画面へ移行する際に、アイテムの情報受け渡しに失敗してしまい編集画面へスムーズに移行することができません。
エラー
'library' is not defined.
ソースコード
LibraryDetail.js
JavaScript
1import React from 'react'; 2import firebase from 'react-native-firebase'; 3import { View, Text, StyleSheet } from 'react-native'; 4import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 5import { Button } from './common'; 6 7export default class LibraryDetail extends React.Component { 8 render() { 9 const { currentUser } = firebase.auth(); 10 const { name, description, user } = this.props.navigation.state.params; 11 12 return ( 13 <View> 14 <View> 15 <Text>{name}</Text> 16 </View> 17 18 <View> 19 <Text>{description}</Text> 20 </View> 21 22 <View> 23 <Text>{user.name}</Text> 24 <View> 25 26 <View> 27 <Button onPress={()=> this.props.navigation.navigate('Edit')}> 28 Edit 29 </Button> 30 </View> 31 ); 32 } 33}
Detail.js
JavaScript
1 import React from 'react'; 2 import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image } from 'react-native'; 3 4 import Screen from '../../ui/components/Screen'; 5 import LibraryDetail from '../../ui/components/LibraryDetail'; 6 7class Detail extends React.Component { 8 render() { 9 const { name, description, user } = this.props.navigation.state.params; 10 return ( 11 <Screen> 12 <LibraryDetail library={library} navigation={this.props.navigation} /> 13 </Screen> 14 ); 15 } 16 } 17 18 export default Detail;
Edit.js
JavaScript
1import _ from 'lodash'; 2import React from 'react'; 3import DatePicker from 'react-native-datepicker'; 4import ImagePicker from 'react-native-image-picker'; 5import Icon from '../../ui/components/Icon'; 6import { connect } from 'react-redux'; 7import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Picker, Image } from 'react-native'; 8import * as Theme from '../../theme'; 9import Screen from '../../ui/components/Screen'; 10import FooterTab from '../../ui/components/FooterTab'; 11import { libraryUpdate, librarySave } from '../../ui/redux/uiActions'; 12 13 14class Edit extends React.Component { 15 16 componentWillMount() { 17 _.each(this.props.library, (value, prop) => { 18 this.props.libraryUpdate({ prop, value }); 19 }); 20 } 21 22 onButtonPress() { 23 const { name, descriotion } = this.props; 24 25 this.props.librarySave({ name, description, uid: this.props.library.uid }); 26 } 27 28 29 render() { 30 return ( 31 <Screen> 32 <ScrollView> 33 <CardSection> 34 <Input 35 label={'Library Name'} 36 value={this.props.name} 37 onChangeText={value => this.props.libraryUpdate({ prop: 'name', value })} 38 /> 39 </CardSection> 40 41 ・・・ 42 43 <Button onPress={this.onButtonPress.bind(this)}> 44 Save Changes 45 </Button> 46 </ScrollView> 47 </Screen> 48 ); 49 } 50} 51 52const mapStateToProps = (state) => { 53 const { name, description } = state.libraryForm; 54 55 return { name, description }; 56}; 57 58export default connect(mapStateToProps, { 59 libraryUpdate, 60 librarySave 61})(Edit);
追記①
library={this.props.library}
上記に転記してエラーは出なくなったのですが、やはりデータは引き継げていないようで編集画面でもuidが取れていないエラーとなります。
回答1件
あなたの回答
tips
プレビュー