Передать состояние опциям выпадающего меню? - PullRequest
Новая
       10

Передать состояние опциям выпадающего меню?

0 голосов
/ 12 апреля 2019

Я пытаюсь заполнить параметр options компонента Dropdown из состояния, но в Dropdown ничего не отображается, потому что состояние пусто при отображении Dropdown.

вот как я создаю государство: 

export interface IListState {
  views: IView[];
}

и вот как я его инициализирую в конструкторе: 

this.state = {
    views: []
};

Тогда в componentDidMount: 

public componentDidMount(): void {
      this.props.provider.getViews().then((views: IView[]) => {
               this.setState({
                     views: views
               })
       });
}

И, наконец, в рендере я использую раскрывающийся список следующим образом: 

<Dropdown
        label="Disabled example with defaultSelectedKey"
        defaultSelectedKey=""
        options={this.state.views}
        disabled={false}
/>

Проблема в том, что когда веб-часть отображается в консоли, я вижу, что состояние пустое, а затем оно заполняется данными, но раскрывающийся список уже был отображен, поэтому он не получает данные.

Это то, что показывает консоль: Console log

Как сделать так, чтобы раскрывающийся список считывал состояние, чтобы получить данные для свойства опции?

ОБНОВЛЕННЫЙ КОД:

Я обновил код и установил раскрывающийся список в методе, и вот как я его вызываю из render (): 

<div>
            { this._renderDropdown() }
          </div>

и вот как выглядит метод: 

private _renderDropdown(): any {
    const {views} = this.state;
    console.log(views);
    if(views.length > 0) {
      return(
        <Dropdown
           label="Disabled example with defaultSelectedKey"
           defaultSelectedKey=""
           options={views}
           disabled={false}
         />
      )
    }
  }

Но результат точно такой же :-(

С наилучшими пожеланиями Америко

1 Ответ

0 голосов
/ 12 апреля 2019

Вам нужно подождать данных, прежде чем вы сможете отобразить компонент Dropdown с заполненными данными и, возможно, покажет индикатор загрузки, пока API все еще загружается. 

render () {
   const { views } = this.state;
   if(views.length > 0) {
      return <Dropdown
            label="Disabled example with defaultSelectedKey"
            defaultSelectedKey=""
            options={views}
            disabled={false}
          />
   }
   return <Loading/> // your loading component if any
}
...