React FluentUI 组件未更新

Question

我在 Sharepoint webpart 中有一个 FluentUI Dropdown component 行为异常，它的定义如下：

<Dropdown
  defaultSelectedKey={new Date().getMonth()}
  options={getMonthSelection()}
  styles={dropdownStyles}
  onChange={this.handleTimePeriodChange}
  selectedKey={this.state.month}
/>

当 onChange 事件触发时，它会调用以下函数：

private handleTimePeriodChange(event, option, index) {
    this.setState({
        month: option.key
    });
}

除 Dropdown UI 元素未更改以反映新选择外，一切正常。如果我删除对 setState() 的调用，则 UI 元素会更新以反映选择，但状态不会更新。

谁能看出我哪里出错了，是否有办法在不破坏 UI 元素的情况下更新状态属性？

Answer 1

问题出在 Dropdown 组件本身的定义中，并且是由于 defaultSelectedKey 属性。我认为这里发生的事情是，它没有为下拉列表设置初始值，而是将控件绑定到传入的对象；上面代码中的结果是 Dropdown 值绑定到新的 Date().getMonth() 即使 selectedKey 绑定到 'month' 状态属性.

解决方案是在初始化时直接将 defaultSelectedKey 设置为状态属性，然后将状态属性设置为当前月份，如下所示：

<Dropdown
    defaultSelectedKey={this.state.month}
    options={getMonthSelection()}
    styles={dropdownStyles}
    onChange={this.handleTimePeriodChange}
/>

当我这样做时，下拉选择现在绑定到状态属性本身，因此对状态属性的任何更改都会反映在 UI 元素中。

React FluentUI 组件未更新

React FluentUI Component Not Updating

reactjs

fluent-ui