下拉清除但组件更新后状态仍然存在

Question

我一直在关注一些 tutorials 使用 Fluent ui 和 React 创建 SPFX webpart 表单。

我的webpart组件构造如下：

 constructor(props: IOrderingProps, wpState: ICurrentWpState) {
    super(props);
    // init the state properties
    this.state = {
      companyDropDownSelected: "",
      cart: null
    };

    this.showStateClicked = this.showStateClicked.bind(this);
    this.onCompanyChange = this.onCompanyChange.bind(this); 
}

我的渲染：

    public render(): React.ReactElement<IOrderingProps> {
    return (

      <div className={styles.tpOrdering}>
        <div className={styles.container}>

          <Stack tokens={stackTokens}>
            <span className={styles.title}>{this.props.description}</span>
            <Dropdown
              placeholder="Select a company"
              label="Company"
              selectedKey={this.state.companyDropDownSelected}
              id="companyDdl"
              styles={dropdownStyles}
              options={this.props.companyOptions}
              onChange={this.onCompanyChange}
            />
            <PrimaryButton text="Show Comp state" onClick={this.showStateClicked} />                        
            <table id="example" className="display partsTable">
            </table>
          </Stack>

        </div>
      </div>
    );
  }

请注意，我选择的密钥存储在状态中。我的 onChange 下拉菜单事件：

public onCompanyChange = async (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): Promise<void> => {    
    const selectedKey: string = item ? (item.key as string) : "";
    this.setState({ companyDropDownSelected: selectedKey });
    this.fetchParts();
  }

一切正常。但是，如果我更新 WebPart 属性窗格中的任何值，我希望下拉列表保留它的选定值。目前它会触发 componentDidUpdate 并清除下拉列表，即使状态仍然存在。如何将下拉菜单重置为其现有的选定键状态？

我的 componentDidUpdate 实现：

public componentDidUpdate(prevProps: IOrderingProps, prevState: ICurrentWpState, prevContext: any): void {
    // re-execute if limit has changed.
    if (this.props.limit !== prevProps.limit) {
      this.fetchParts();      
    }
  }

即使我在 componentDidUpdate 中什么都不做，它也会清除下拉列表，即使所选键的状态仍然存在。

Answer 1

这最终成为一个 async/await 问题，而不是状态或控制问题。问题是存储在属性中的 companyOptions 正从 Web 部件传递到组件中。它们是通过对 API.

的异步调用创建的

const element: React.ReactElement<IOrderingProps> = React.createElement(
  Ordering,
  {
    description: this.properties.description,
    context: this.context,
    limit: this.properties.limit,
    msalInstance: this.msalConfig,
    companyOptions: await this.getCompanyOptions()
    
  }
);

未正确等待 this.getCompanyOptions() 中的提取和令牌调用。因此，当 companyOptions 仍然为 null 时，下拉选择键试图在 componentUpdate 上重置。

<Dropdown
    placeholder="Select a company"
        label="Company"
        selectedKey={this.state.companyDropDownSelected}
        id="companyDdl"
        styles={dropdownStyles}
        options={this.props.companyOptions}
        onChange={this.onCompanyChange}
        />

现在组件更新时有有效选项，这按预期工作。

下拉清除但组件更新后状态仍然存在

Dropdown clearing but state remains after component update

sharepoint

reactjs

spfx

fluentui-react