ドロップダウン選択をクリアするoffice-ui-fabric反応コンポーネント

Question

ドロップダウンリストで選択項目をクリアする際に問題が発生しました。オプションの人口が変わるので、いつかドロップダウンの選択をクリアしなければなりません。新しいオプションの長さが以前のものよりも小さい場合、選択範囲は範囲外のエラーを示します。

簡単な例： （参照：[https://developer.microsoft.com/en-us/fabric#Variants][1]）

<Dropdown 
 
       selectedKey={ selectedItem && selectedItem.key } 
 
       onChanged={ item => this.setState({selectedItem: item}) } 
 
       options={ 
 
       [ 
 
        { key: 'A', text: 'Option a' }, 
 
        { key: 'B', text: 'Option b' }, 
 
       ] 
 
       } 
 
/>

私は考えることができる唯一のことは、多分に未定義のヌル/にselectedItem.keyを設定selectedKey、すなわちを制御することですそれをクリアするが、私はその解決策で幸運を得ることはありません..

Answer 1

私が持っていた問題は、私は自分のオプションと選択したIDを同時に変更しなかったということでした。果物は、あなたの観察可能な配列になり

// ...async call .then((newFruits) => ... 
 
this.fruits = { 
 
    selectedId: null, 
 
    options: ['My','newly', 'fetched','fruits','array'] 
 
};

...：私がやったことは、私がオブジェクトに各ドロップダウンを関連付けるということでした。ここ

<Dropdown 
 
    selectedKey={ fruits && fruits.selectedId } 
 
    onChanged={ this.myFuncThatCallsApiWithNewId } 
 
    options={fruits.options} 
 
/>