В меню DropDown не отображаются значения переданного массива.

Question

Значения skillList не отображаются в раскрывающемся списке. Он показывает пустой раскрывающийся список (данные, извлеченные из API, без проблем помещаются в массив skillList)

 import React, { Component } from 'react'
 let skillList = [];
 export class DataCheck extends Component {

     constructor(props) {
         super(props)

         this.state = {
             skill: "",
             skillId: "",
         }
        this. handleSkillChange=this. handleSkillChange.bind(this);

     }
     componentDidMount() {
    // worker skill selection

         fetch("http://localhost:3001/dataservices/getallskills")
         .then (res=>res.json())
         .then(res => {
          console.log(res);
            let temArray = {};
            for (let i = 0; i < res.recordsets[0].length; i++) {
               temArray["value"] = res.recordsets[0][i].SkillId;
               temArray["label"] = res.recordsets[0][i].SkillTitle;
               skillList.push(temArray);
               console.log(skillList);
               temArray = {};
              }
             })
            .catch(function(error) {
            console.log(error);
            });
          }

       handleSkillChange(skill) {
        this.setState({
         skill: skill,
         skillId: skill.value
         });
       }

    render() {
         return (
            <div>

                 <form>
                <select
                      value={this.state.skill}
                      onChange={this.handleSkillChange}
                      options={skillList}
                      placeholder="Skills"
                       />

                   </form>
                   </div>
             )
         }
       }

  export default DataCheck


when I check the dev-tools, it shows like this:

  options:Array

         0:Object
           label:"wood works"
           value:6

(массив состоит из16 таких объектов)

консоль говорит:

warning.js: 36 Предупреждение: неизвестный объект options в теге. Удалить эту опору из элемента.

Answer 1

Родной select не имеет options реквизита. Вам необходимо вручную map тег option:

<select
  value={this.state.skill}
  onChange={this.handleSkillChange}
  placeholder="Skills"
>
  {this.state.skillList.map((optionSkill) => (
    <option value={optionSkill.value}>{optionSkill.label}</option>
  )}
</select>

В настоящее время вы добавили skillList как обычную переменную с областью действия модуля. Даже если вы изменили skillList, то же самое не будет отражено в пользовательском интерфейсе, потому что React не обнаруживает это изменение. вам придется изменить skillList на переменную состояния для React.

this.state = {
  skill: "",
  skillId: "",
  skillList: []
}

fetch("http://localhost:3001/dataservices/getallskills")
  .then (res=>res.json())
  .then(res => {
     this.setState({
       skillList: res.recordsets[0].map((recordSet) => ({
         label: recordSet.SkillTitle,
         value: recordSet.SkillId,
       }))
     });       
  });

Answer 2

Вы должны добавить option тег внутрь select. Переберите массив элементов, используя .map, и вы получите свой результатЭта кодовая ручка может помочь вам сделать эту работу, выберите пример

Надеюсь, это поможет вам!