反应材料选择选项未填充

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 = [];

        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 以方便使用

您需要数组才能使用地图。例子。

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