javascript - react Material 选择选项未填充

Question

我正在迭代并生成菜单项...当我 console.log 时，我看到了这些项目，但在 UI 中下拉列表是空的。不知道为什么没有填充选择。有任何想法吗？

下面提供的代码，它用于 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
}

}

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>

Answer 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>