反应材料选择选项未填充

Question

我正在迭代和生成 MenuItems...当我 console.log 我看到项目但在 UI 中的下拉列表是空的。不知道为什么 Select 没有被填充。有任何想法吗？

下面提供的代码，用于 Object.entries() 部分......还有一些绕过堆栈溢出文本长度规则的文本。

朗基

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

}

}

Answer 1

let items = [];&nbsp; &nbsp; &nbsp; &nbsp; Object.entries(this.languagesKey()).forEach(([key, value], index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items.push(<MenuItem key={index} value={key}>{value}</MenuItem>);&nbsp; &nbsp; &nbsp; &nbsp; });<FormControl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <InputLabel htmlFor="nativeLanguageSelect">Select Language You Already Know</InputLabel>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Select&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={ this.nativeLanguageChange }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputProps={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'nativeLanguage',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 'nativeLanguageSelect'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={ this.state.nativeLanguage }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { items }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Select>&nbsp; </FormControl>推荐使用 .map 以方便使用您需要数组才能使用地图。例子。<FormControl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <InputLabel htmlFor="nativeLanguageSelect">Select Language You Already Know</InputLabel>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Select&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={ this.nativeLanguageChange }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputProps={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'nativeLanguage',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 'nativeLanguageSelect'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={ this.state.nativeLanguage }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {Object.keys(this.languagesKey()).map(option =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MenuItem key={option} value={option}>{this.languagesKey()[option]}</MenuItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Select>&nbsp; </FormControl>