我有一系列所有语言。我想用所有语言填充选择器，但我收到错误消息。
这是我的代码。看起来有问题的代码是{this.state.isoLangs.map((item, index) => {
return <Picker.Item key={index} label={item.name} value={item.nativeName} />
})}
import React from 'react';
import {Image, Picker, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import {StackNavigator} from 'react-navigation'; // Version can be specified in package.json
import {Constants} from 'expo';
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.section1}>
<Text style={[styles.text, {paddingBottom: 20}]}>{'Welcome'}</Text>
</View>
<View style={styles.section2}>
<Text style={[styles.text, {paddingTop: 20}]}>{'Your verification was successful'}</Text>
</View>
<View style={styles.section3}>
<Text style={styles.text}>{'Sign up as:'}</Text>
</View>
<View style={styles.section4}>
<View style={styles.buttonContainer}>
<View style={styles.button}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Image source={require('./assets/stck2.png')} style={styles.image}/>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Text style={styles.buttonText}>{'Translator'}</Text>
</TouchableHighlight>
</View>
<View style={styles.button}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>
<Image source={require('./assets/stck1.png')} style={styles.image}/>
</TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>
<Text style={styles.buttonText}>{'Recruiter'}</Text>
</TouchableHighlight>
</View>
</View>
</View>
</View>
);
}
}
class DetailsScreen extends React.Component {
state = {user: '',
isoLangs : {
"ab":{
"name":"Abkhaz",
"nativeName":"аҧсуа"
},
"aa":{
"name":"Afar",
"nativeName":"Afaraf"
},
"af":{
"name":"Afrikaans",
"nativeName":"Afrikaans"
},
"ak":{
"name":"Akan",
"nativeName":"Akan"
},
"sq":{
"name":"Albanian",
"nativeName":"Shqip"
},
"am":{
"name":"Amharic",
"nativeName":"አማርኛ"
},
"ar":{
"name":"Arabic",
"nativeName":"العربية"
},
"an":{
"name":"Aragonese",
"nativeName":"Aragonés"
},
"hy":{
"name":"Armenian",
"nativeName":"Հայերեն"
},
"as":{
"name":"Assamese",
"nativeName":"অসমীয়া"
},
"av":{
"name":"Avaric",
"nativeName":"авар мацӀ, магӀарул мацӀ"
},
"ae":{
"name":"Avestan",
"nativeName":"avesta"
},
"ay":{
"name":"Aymara",
"nativeName":"aymar aru"
},
"az":{
"name":"Azerbaijani",
"nativeName":"azərbaycan dili"
},
"bm":{
"name":"Bambara",
"nativeName":"bamanankan"
},
"ba":{
"name":"Bashkir",
"nativeName":"башҡорт теле"
},
"eu":{
"name":"Basque",
"nativeName":"euskara, euskera"
},
"be":{
"name":"Belarusian",
"nativeName":"Беларуская"
},
"bn":{
"name":"Bengali",
"nativeName":"বাংলা"
},
"bh":{
"name":"Bihari",
"nativeName":"भोजपुरी"
},
"bi":{
"name":"Bislama",
"nativeName":"Bislama"
},
"bs":{
"name":"Bosnian",
"nativeName":"bosanski jezik"
},
"br":{
"name":"Breton",
"nativeName":"brezhoneg"
},
"bg":{
"name":"Bulgarian",
"nativeName":"български език"
},
"my":{
"name":"Burmese",
"nativeName":"ဗမာစာ"
},
"ca":{
"name":"Catalan; Valencian",
"nativeName":"Català"
},
"ch":{
"name":"Chamorro",
"nativeName":"Chamoru"
},
"ce":{
"name":"Chechen",
"nativeName":"нохчийн мотт"
},
"ny":{
"name":"Chichewa; Chewa; Nyanja",
"nativeName":"chiCheŵa, chinyanja"
},
"zh":{
"name":"Chinese",
"nativeName":"中文 (Zhōngwén), 汉语, 漢語"
},
"cv":{
"name":"Chuvash",
"nativeName":"чӑваш чӗлхи"
},
"kw":{
"name":"Cornish",
"nativeName":"Kernewek"
},
"co":{
"name":"Corsican",
"nativeName":"corsu, lingua corsa"
},
"cr":{
"name":"Cree",
"nativeName":"ᓀᐦᐃᔭᐍᐏᐣ"
},
"hr":{
"name":"Croatian",
"nativeName":"hrvatski"
},
"cs":{
"name":"Czech",
"nativeName":"česky, čeština"
},
"da":{
"name":"Danish",
"nativeName":"dansk"
},
"dv":{
"name":"Divehi; Dhivehi; Maldivian;",
"nativeName":"ދިވެހި"
},
"nl":{
"name":"Dutch",
"nativeName":"Nederlands, Vlaams"
},
"en":{
"name":"English",
"nativeName":"English"
},
"eo":{
"name":"Esperanto",
"nativeName":"Esperanto"
},
"et":{
"name":"Estonian",
"nativeName":"eesti, eesti keel"
},
"ee":{
"name":"Ewe",
"nativeName":"Eʋegbe"
},
"fo":{
"name":"Faroese",
"nativeName":"føroyskt"
},
"fj":{
"name":"Fijian",
"nativeName":"vosa Vakaviti"
},
"fi":{
"name":"Finnish",
"nativeName":"suomi, suomen kieli"
},
"fr":{
"name":"French",
"nativeName":"français, langue française"
},
"ff":{
"name":"Fula; Fulah; Pulaar; Pular",
"nativeName":"Fulfulde, Pulaar, Pular"
},
"gl":{
"name":"Galician",
"nativeName":"Galego"
},
"ka":{
"name":"Georgian",
"nativeName":"ქართული"
},
"de":{
"name":"German",
"nativeName":"Deutsch"
},
"el":{
"name":"Greek, Modern",
"nativeName":"Ελληνικά"
},
"gn":{
"name":"Guaraní",
"nativeName":"Avañeẽ"
},
"gu":{
"name":"Gujarati",
"nativeName":"ગુજરાતી"
},
"ht":{
"name":"Haitian; Haitian Creole",
"nativeName":"Kreyòl ayisyen"
},
"ha":{
"name":"Hausa",
"nativeName":"Hausa, هَوُسَ"
},
"he":{
"name":"Hebrew (modern)",
"nativeName":"עברית"
},
"hz":{
"name":"Herero",
"nativeName":"Otjiherero"
},
"hi":{
"name":"Hindi",
"nativeName":"हिन्दी, हिंदी"
},
"ho":{
"name":"Hiri Motu",
"nativeName":"Hiri Motu"
},
"hu":{
"name":"Hungarian",
"nativeName":"Magyar"
},
"ia":{
"name":"Interlingua",
"nativeName":"Interlingua"
},
"id":{
"name":"Indonesian",
"nativeName":"Bahasa Indonesia"
},
"ie":{
"name":"Interlingue",
"nativeName":"Originally called Occidental; then Interlingue after WWII"
},
"ga":{
"name":"Irish",
"nativeName":"Gaeilge"
},
...
"yi":{
"name":"Yiddish",
"nativeName":"ייִדיש"
},
"yo":{
"name":"Yoruba",
"nativeName":"Yorùbá"
},
"za":{
"name":"Zhuang, Chuang",
"nativeName":"Saɯ cueŋƅ, Saw cuengh"
}
}};
getLanguageName = function(key) {
key = key.slice(0,2);
lang = this.state.isoLangs[key];
return lang ? lang.name : undefined;
};
getLanguageNativeName = function(key) {
key = key.slice(0,2);
lang = this.state.isoLangs[key];
return lang ? lang.nativeName : undefined;
};
render() {
return (
<View style={{flex: 1, justifyContent: 'center'}}>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<Text style={{
fontSize: 20,
fontFamily: 'normal',
color: 'skyblue',
}}>
Which languages do you translate?
</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<Picker style={{width: 150}}
selectedValue={this.state.language}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label={this.getLanguageName('sv')} value="java"/>
<Picker.Item label="JavaScript" value="js"/>
{this.state.isoLangs.map((item, index) => {
return <Picker.Item key={index} label={item.name} value={item.nativeName} />
})}
</Picker>
<Image
source={require('./assets/Arrow.png')}
/>
<Picker style={{width: 150}}
selectedValue={this.state.language}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label="Arabic" value="java"/>
<Picker.Item label="JavaScript" value="js"/>
</Picker>
</View>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
<Text style={{
fontSize: 20,
fontFamily: 'normal',
color: 'skyblue',
}}>+ add language</Text>
</TouchableHighlight>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}>
<Image
source={require('./assets/Next.png')}
/>
</TouchableHighlight>
</View>
</View>
);
}
}
const RootStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack/>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#fff',
},
section1: {
flex: 0.17,
justifyContent: 'flex-end',
alignItems: 'center'
},
section2: {
flex: 0.30,
justifyContent: 'flex-start',
alignItems: 'center'
},
section3: {
flex: 0.10,
justifyContent: 'center',
alignItems: 'center'
},
section4: {
flex: 0.43
},
text: {
fontSize: 24,
color: '#53a6db',
textAlign: 'center',
paddingTop: 40,
paddingBottom: 40,
paddingLeft: 40,
paddingRight: 40
},
buttonContainer: {
flex: 1,
flexDirection: 'row'
},
button: {
flex: 0.5,
justifyContent: 'center',
alignItems: 'center'
},
buttonText: {
fontSize: 24,
color: '#53a6db',
textAlign: 'center',
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,
paddingRight: 5
},
image: {
width: 100,
height: 100
}
});
错误消息是：
TypeError: undefined is not a function (evaluating 'this.state.isoLangs.map')
This error is located at:
in DetailsScreen (at SceneView.js:17)
in SceneView (at CardStack.js:455)
in RCTView (at View.js:71)
in View (at CardStack.js:454)
in RCTView (at View.js:71)
in View (at CardStack.js:453)
in RCTView (at View.js:71)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at Card.js:12)
in Card (at PointerEventsContainer.js:39)
in Container (at CardStack.js:498)
in RCTView (at View.js:71)
in View (at CardStack.js:414)
in RCTView (at View.js:71)
in View (at CardStack.js:413)
in CardStack (at CardStackTransitioner.js:67)
in RCTView (at View.js:71)
in View (at Transitioner.js:142)
in Transitioner (at CardStackTransitioner.js:19)
in CardStackTransitioner (at StackNavigator.js:41)
in Unknown (at createNavigator.js:13)
in Navigator (at createNavigationContainer.js:226)
in NavigationContainer (at App.js:875)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:71)
in View (at AppContainer.js:102)
in RCTView (at View.js:71)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
* App.js:811:16 in render
- node_modules\react-proxy\modules\createPrototypeProxy.js:44:35 in proxiedMethod
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7866:21 in finishClassComponent
- ... 18 more stack frames from framework internals
答案 0 :(得分：1)
IsoLangs需要是一个数组，试试这个......
isoLangs : [
"ab":{
"name":"Abkhaz",
"nativeName":"аҧсуа"
},
"aa":{
"name":"Afar",
"nativeName":"Afaraf"
},
"af":{
"name":"Afrikaans",
"nativeName":"Afrikaans"
},
"ak":{
"name":"Akan",
"nativeName":"Akan"
},
"sq":{
"name":"Albanian",
"nativeName":"Shqip"
},
"am":{
"name":"Amharic",
"nativeName":"አማርኛ"
},
"ar":{
"name":"Arabic",
"nativeName":"العربية"
},
"an":{
"name":"Aragonese",
"nativeName":"Aragonés"
},
"hy":{
"name":"Armenian",
"nativeName":"Հայերեն"
},
"as":{
"name":"Assamese",
"nativeName":"অসমীয়া"
},
"av":{
"name":"Avaric",
"nativeName":"авар мацӀ, магӀарул мацӀ"
},
"ae":{
"name":"Avestan",
"nativeName":"avesta"
},
"ay":{
"name":"Aymara",
"nativeName":"aymar aru"
},
"az":{
"name":"Azerbaijani",
"nativeName":"azərbaycan dili"
},
"bm":{
"name":"Bambara",
"nativeName":"bamanankan"
},
"ba":{
"name":"Bashkir",
"nativeName":"башҡорт теле"
},
"eu":{
"name":"Basque",
"nativeName":"euskara, euskera"
},
"be":{
"name":"Belarusian",
"nativeName":"Беларуская"
},
"bn":{
"name":"Bengali",
"nativeName":"বাংলা"
},
"bh":{
"name":"Bihari",
"nativeName":"भोजपुरी"
},
"bi":{
"name":"Bislama",
"nativeName":"Bislama"
},
"bs":{
"name":"Bosnian",
"nativeName":"bosanski jezik"
},
"br":{
"name":"Breton",
"nativeName":"brezhoneg"
},
"bg":{
"name":"Bulgarian",
"nativeName":"български език"
},
"my":{
"name":"Burmese",
"nativeName":"ဗမာစာ"
},
"ca":{
"name":"Catalan; Valencian",
"nativeName":"Català"
},
"ch":{
"name":"Chamorro",
"nativeName":"Chamoru"
},
"ce":{
"name":"Chechen",
"nativeName":"нохчийн мотт"
},
"ny":{
"name":"Chichewa; Chewa; Nyanja",
"nativeName":"chiCheŵa, chinyanja"
},
"zh":{
"name":"Chinese",
"nativeName":"中文 (Zhōngwén), 汉语, 漢語"
},
"cv":{
"name":"Chuvash",
"nativeName":"чӑваш чӗлхи"
},
"kw":{
"name":"Cornish",
"nativeName":"Kernewek"
},
"co":{
"name":"Corsican",
"nativeName":"corsu, lingua corsa"
},
"cr":{
"name":"Cree",
"nativeName":"ᓀᐦᐃᔭᐍᐏᐣ"
},
"hr":{
"name":"Croatian",
"nativeName":"hrvatski"
},
"cs":{
"name":"Czech",
"nativeName":"česky, čeština"
},
"da":{
"name":"Danish",
"nativeName":"dansk"
},
"dv":{
"name":"Divehi; Dhivehi; Maldivian;",
"nativeName":"ދިވެހި"
},
"nl":{
"name":"Dutch",
"nativeName":"Nederlands, Vlaams"
},
"en":{
"name":"English",
"nativeName":"English"
},
"eo":{
"name":"Esperanto",
"nativeName":"Esperanto"
},
"et":{
"name":"Estonian",
"nativeName":"eesti, eesti keel"
},
"ee":{
"name":"Ewe",
"nativeName":"Eʋegbe"
},
"fo":{
"name":"Faroese",
"nativeName":"føroyskt"
},
"fj":{
"name":"Fijian",
"nativeName":"vosa Vakaviti"
},
"fi":{
"name":"Finnish",
"nativeName":"suomi, suomen kieli"
},
"fr":{
"name":"French",
"nativeName":"français, langue française"
},
"ff":{
"name":"Fula; Fulah; Pulaar; Pular",
"nativeName":"Fulfulde, Pulaar, Pular"
},
"gl":{
"name":"Galician",
"nativeName":"Galego"
},
"ka":{
"name":"Georgian",
"nativeName":"ქართული"
},
"de":{
"name":"German",
"nativeName":"Deutsch"
},
"el":{
"name":"Greek, Modern",
"nativeName":"Ελληνικά"
},
"gn":{
"name":"Guaraní",
"nativeName":"Avañeẽ"
},
"gu":{
"name":"Gujarati",
"nativeName":"ગુજરાતી"
},
"ht":{
"name":"Haitian; Haitian Creole",
"nativeName":"Kreyòl ayisyen"
},
"ha":{
"name":"Hausa",
"nativeName":"Hausa, هَوُسَ"
},
"he":{
"name":"Hebrew (modern)",
"nativeName":"עברית"
},
"hz":{
"name":"Herero",
"nativeName":"Otjiherero"
},
"hi":{
"name":"Hindi",
"nativeName":"हिन्दी, हिंदी"
},
"ho":{
"name":"Hiri Motu",
"nativeName":"Hiri Motu"
},
"hu":{
"name":"Hungarian",
"nativeName":"Magyar"
},
"ia":{
"name":"Interlingua",
"nativeName":"Interlingua"
},
"id":{
"name":"Indonesian",
"nativeName":"Bahasa Indonesia"
},
"ie":{
"name":"Interlingue",
"nativeName":"Originally called Occidental; then Interlingue after WWII"
},
"ga":{
"name":"Irish",
"nativeName":"Gaeilge"
},
...
"yi":{
"name":"Yiddish",
"nativeName":"ייִדיש"
},
"yo":{
"name":"Yoruba",
"nativeName":"Yorùbá"
},
"za":{
"name":"Zhuang, Chuang",
"nativeName":"Saɯ cueŋƅ, Saw cuengh"
}
];
答案 1 :(得分：1)
如果您想循环使用语言，可以使用下面的示例。有关详细信息，请查看Object.keys()
Object.keys()方法返回给定对象自己的数组 可枚举的属性，与a提供的顺序相同for...in循环（不同之处在于for-in循环枚举 原型链中的属性也是如此。
示例
render() {
return (
<View style={styles.container}>
<Picker
selectedValue={this.state.language}
onValueChange={(itemValue) => this.setState({language: itemValue})}>
{
Object.keys(this.state.isoLangs).map((lang) => {
console.log('lang: ', lang);
console.log('lang name: ', this.state.isoLangs[lang].name);
console.log('lang nativeName: ', this.state.isoLangs[lang].nativeName);
return <Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang} />
})
}
</Picker>
</View>
);
}