Question

我正在尝试从某个状态填充Dropdown组件的options参数，但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：

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

问题是当Web部件在控制台中呈现时，我可以看到状态为空，然后填充了数据，但是Dropdown已经呈现，因此无法获取数据。

控制台显示以下内容：

如何使下拉菜单读取状态以获取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}
         />
      )
    }
  }

但是结果是完全相同的：-(

最好的问候美国

Answer 1

您需要等待数据，然后才能使用填充的数据呈现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
}

将状态传递给下拉菜单选项？

1 个答案: