我正在迭代并生成MenuItems ...当我console.log时,我看到这些项目,但是在UI中,下拉列表为空。不知道为什么没有选择。有任何想法吗?
下面提供的代码,用于Object.entries()部分..............以及其他一些绕过堆栈的文本溢出文本长度规则。
LANGKEY
function languagesKey(){
return {
"ar": "Arabic",
"af": "Afrikaans",
"eu": "Euskal", // Basque,
"bg": "български", // "Bulgarian",
"ca": "Català", // "Catalan",
"cmn": "Mandarin",
"yue": "Cantonese",
"hr": "Hrvatski", // "Croatian",
"cs": "Ceština", // "Czech",
"da": "Dansk", // "Danish",
"en": "English",
"fa": "Farsi",
"fr": "French",
"fil": "Filipino",
"fi": "Suomalainen", // "Finnish",
"gl": "Galaco", // "Galacian",
"de": "Deutsche", // "German",
"el": "Ελληνικά", // "Greek",
"he": "Hebrew",
"hi": "हिंदी", // Hindi",
"hu": "Magyar", // "Hungarian",
"is": "Íslensku", // "Icelandic",
"id": "Bbahasa Indonesia", // "Indonesian",
"it": "Italiano", // "Italian",
"ja": "日本人", // "Japanese",
"ko": "한국어", // "Korean",
"lt": "Lietuvių", // "Lithuanian",
"ms": "Melayu", // "Malaysian",
"nl": "Nederlands", // "Dutch",
"nb": "Norsk", // "Norwegian",
"pl": "Polskie", // "Polish",
"pt": "Português", // "Porteguese",
"ro": "Română", // "Romanian",
"ru": "Pусский", // "Russian",
"sr": "Српски", // "Serbian",
"sk": "Slovenský", // "Slovakian",
"sl": "Slovenija", // "Slovenian",
"es": "Español", // "Spanish",
"sv": "Svenska", // "Swedish",
"th": "ไทย", // "Thai",
"tr": "Türk", // "Turkish",
"uk": "Українська", // "Ukrainian",
"vi": "Tiếng Việt", // "Vietnamese",
"zu": "Zulu"
}
}
状态
constructor(props){
super(props)
this.state = {
description: null,
language: '',
listName: null,
listIdToDelete: null,
nativeLanguage: '',
openModal: false,
words: null
}
}
HTML
<FormControl>
<InputLabel htmlFor="languageSelect">Select Language You Plan to Learn</InputLabel>
<Select
onChange={ this.languageChange }
inputProps={{
name: 'language',
id: 'languageSelect'
}}
value={ this.state.language }
>
{ Object.entries(languagesKey()).forEach(([key, value], index) => {
return (
<MenuItem key={ index } value={ key }>{ value }</MenuItem>
)
})
}
</Select>
</FormControl>
<FormControl>
<InputLabel htmlFor="nativeLanguageSelect">Select Language You Already Know</InputLabel>
<Select
onChange={ this.nativeLanguageChange }
inputProps={{
name: 'nativeLanguage',
id: 'nativeLanguageSelect'
}}
value={ this.state.nativeLanguage }
>
{ Object.entries(languagesKey()).forEach(([key, value], index) => {
return (
<MenuItem key={ index } value={ key }>{ value }</MenuItem>
)
})
}
</Select>
</FormControl>
答案 0 :(得分:1)
let items = [];
Object.entries(this.languagesKey()).forEach(([key, value], index) => {
items.push(<MenuItem key={index} value={key}>{value}</MenuItem>);
});
<FormControl>
<InputLabel htmlFor="nativeLanguageSelect">Select Language You Already Know</InputLabel>
<Select
onChange={ this.nativeLanguageChange }
inputProps={{
name: 'nativeLanguage',
id: 'nativeLanguageSelect'
}}
value={ this.state.nativeLanguage }
>
{ items }
</Select>
</FormControl>
推荐使用.map以便于使用
您需要数组才能使用map。例子。
<FormControl>
<InputLabel htmlFor="nativeLanguageSelect">Select Language You Already Know</InputLabel>
<Select
onChange={ this.nativeLanguageChange }
inputProps={{
name: 'nativeLanguage',
id: 'nativeLanguageSelect'
}}
value={ this.state.nativeLanguage }
>
{Object.keys(this.languagesKey()).map(option =>
<MenuItem key={option} value={option}>{this.languagesKey()[option]}</MenuItem>
)}
</Select>
</FormControl>