时间戳

首页 > 解决方案 > 将状态传递给下拉选项？

reactjs - 将状态传递给下拉选项？

问题描述

我正在尝试从状态填充 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}
/>

问题是当 Web 部件在控制台中呈现时，我可以看到状态为空，然后它被数据填充，但下拉菜单已经呈现，因此它没有获取数据。

这是控制台显示的内容： 控制台日志

如何使下拉列表读取状态以获取选项属性的数据？

更新代码：

我更新了代码并在一个方法中设置了下拉列表，这就是我从 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}
         />
      )
    }
  }

但结果完全一样:-(

最好的问候美国

标签： reactjsstatedropdownspfx

解决方案

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

推荐阅读