Блог

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

вот как я создаю состояние:

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

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

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

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

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

Я обновил код и установил выпадающий список в методе, и вот как я вызываю его из 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}
         />
      )
    }
  }
  

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

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

Вам нужно дождаться данных, прежде чем вы сможете отобразить выпадающий компонент с заполненными данными и, возможно, показать индикатор загрузки, пока 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
}