Элементы, извлеченные из API, не отображаются в выпадающем меню. - PullRequest
Новая
       3

Элементы, извлеченные из API, не отображаются в выпадающем меню.

0 голосов
/ 02 июля 2019

Работая с приложением React и пытаясь показать опции в раскрывающемся меню, например, я использую тег <Select> из react-select. Все отлично с загрузкой API и доступны данные.Однако в раскрывающемся меню не отображаются параметры. 

import React, { Component } from 'react';
import Select from 'react-select';
import url from '../services/urlService';

class TechCompanies extends Component {

    state = {
        values: []
    }

    componentDidMount() {
        fetch(url + 'api/roles/roles')
            .then(res => res.json())
            .then(res => this.setState({
                values: res.Data
            }))
            .catch(error => console.log(error))
    }

    render() {
        return (
            <div>
                <Select>
                    {this.state.values.map((role) => {
                        return <option key={role.RoleId} value={role.RoleId}
                        >{role.RoleName}</option>
                    })}
                </Select>
            </div>
        )
    }
}

export default TechCompanies;

Ответы [ 2 ]

2 голосов
/ 02 июля 2019

это сработало для меня.Вы просто передаете свой массив как компонент options в Select.Вы также можете передать обработчик onChange как реквизит, а также текущее выбранное значение.

render() {
    return (
      <div>
        <Select
        options={this.state.values}>
        </Select>
      </div>
    )
  }

Вы можете узнать больше об этом на их странице npm https://www.npmjs.com/package/react-select

1 голос
/ 02 июля 2019

react-select атрибут options.

Вы можете создать массив option, используя this.state.values, 

    let option = []
    if (this.state.values.length > 0) {
      this.state.values.forEach(role => {
        let roleDate = {}
        roleDate.value = role.RoleId
        roleDate.label = role.RoleName
        option.push(roleDate)
      })
    }

Использование 

<Select options={options} />

Примечание :: Также убедитесь, что вы получаете ответ от своего вызова API, чтобы получить гарантированный ответ, вы должны использовать async - await для извлечения данных.

Демо

...