React FluentUI 组件未更新答案

【问题标题】：React FluentUI Component Not UpdatingReact FluentUI 组件未更新
【发布时间】：2020-08-05 16:45:58
【问题描述】：

我在 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
    });
}

除了下拉 UI 元素没有改变以反映新的选择之外，一切都很好。如果我删除对 setState() 的调用，则 UI 元素会更新以反映选择，但状态不会更新。

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

【问题讨论】：

应该以什么方式改变？
它应该改变以反映已选择的值。当页面加载时，下拉菜单显示当前月份，但当您选择新选项时，尽管控件正确触发 onChange 事件并使用新月份更新状态，但控件仍显示原始值。

标签： reactjs fluent-ui

【解决方案1】：

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

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

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

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

【讨论】：