Отобразить параметры выбора материала, не заполняющие - PullRequest
Новая
       10

Отобразить параметры выбора материала, не заполняющие

0 голосов
/ 01 октября 2019

Я выполняю итерации и создаю MenuItems ... когда я вижу console.log, я вижу элементы, но в пользовательском интерфейсе раскрывающийся список пуст. Не знаю, почему селекты не заселяются. Есть идеи?

Код, представленный ниже, предназначен для части Object.entries () ................. и еще некоторого текста для обхода переполнения стека. 1003 *

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

STATE 

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>

1 Ответ

1 голос
/ 01 октября 2019 
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>
...