Javascript 如何在fluent ui标记选取器中使用自定义函数生成建议

我正在尝试使用fluent ui中的tagPicker。我使用的是来自现场的样本作为起点：

问题是我的物体有3个道具。数组中的对象是{Code:'string'，Title:'string'，Category:'string'}。我正在使用具有useeffect的状态来获取数据。到目前为止效果还不错，问题是这个建议是空白的。它过滤项目，但不显示我想要的道具

这是我的密码：

import * as React from 'react';

import {
  TagPicker,
  IBasePicker,
  ITag,
  IInputProps,
  IBasePickerSuggestionsProps,
} from 'office-ui-fabric-react/lib/Pickers';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

const inputProps: IInputProps = {
  onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),
  onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),
  'aria-label': 'Tag picker',
};

const pickerSuggestionsProps: IBasePickerSuggestionsProps = {
  suggestionsHeaderText: 'Suggested tags',
  noResultsFoundText: 'No color tags found',
};

const url="url_data"

export const TestPicker: React.FunctionComponent = () => {
    const getTextFromItem = (item) => item.Code;

   const [state, setStateObj] = React.useState({items:[],isLoading:true})
  // All pickers extend from BasePicker specifying the item type.
  React.useEffect(()=>{
      if (!state.isLoading) {
          return
      } else {
        caches.open('cache')
        .then(async cache=> {
            return cache.match(url);
        })
        .then(async data=>{
            return await data.text()
        })
        .then(data=>{
            
            const state = JSON.parse(data).data
            setStateObj({items:state,isLoading:false})
        })
    }
  },[state.isLoading])
  const filterSuggestedTags = (filterText: string, tagList: ITag[]): ITag[] => {
      
    return filterText
      ? state.items.filter(
          tag => tag.Code.toLowerCase().indexOf(filterText.toLowerCase()) === 0 && !listContainsTagList(tag, tagList),
        ).slice(0,11)      : [];
  };
  const listContainsTagList = (tag, state?) => {
    if (!state.items || !state.items.length || state.items.length === 0) {
      return false;
    }
    return state.items.some(compareTag => compareTag.key === tag.key);
  };
  
  return (
    <div>
      Filter items in suggestions: This picker will filter added items from the search suggestions.
      <TagPicker
        removeButtonAriaLabel="Remove"
        onResolveSuggestions={filterSuggestedTags}
        getTextFromItem={getTextFromItem}
        pickerSuggestionsProps={pickerSuggestionsProps}
        itemLimit={1}
        inputProps={inputProps}
      />
    </div>
  );
};

import*as React from'React'；
进口{
挑剔的人，
伊巴塞皮克，
伊塔格，
输入道具，
IBasePickerSuggestionsProps，
}来自“office ui fabric react/lib/Pickers”；
从“office ui fabric react/lib/styleing”导入{mergeStyles}；
常量inputProps:IIInputProps={
onBlur：（ev:React.FocusEvent）=>console.log（'onBlur调用'），
onFocus：（ev:React.FocusEvent）=>console.log（'onFocus调用'），
“aria标签”：“标记选择器”，
};
const pickerSuggestionsProps:IBasePickerSuggestionsProps={
SuggestionHeaderText:“建议的标记”，
noResultsFoundText:'未找到颜色标记'，
};
const url=“url\u数据”
导出常量TestPicker:React.FunctionComponent=（）=>{
const getTextFromItem=（item）=>item.Code；
const[state，setStateObj]=React.useState（{items:[]，isLoading:true}）
//所有选择器都从指定项类型的BasePicker扩展而来。
React.useffect（（）=>{
如果（！state.isLoading）{
返回
}否则{
caches.open（'cache'）
。然后（异步缓存=>{
返回cache.match（url）；
})
。然后（异步数据=>{
return wait data.text（）
})
。然后（数据=>{
const state=JSON.parse（data）.data
setStateObj（{items:state，isLoading:false}）
})
}
}，[state.isLoading]）
常量过滤器建议标记=（过滤器文本：字符串，标记列表：ITag[]）：ITag[]=>{
返回筛选器文本
？state.items.filter(
tag=>tag.Code.toLowerCase（）.indexOf（filterText.toLowerCase（））==0&！listContainsTagList（tag，tagList），
).切片（0,11）：[]；
};
const listContainsTagList=（标记，状态？）=>{
如果（！state.items | | |！state.items.length | | state.items.length==0）{
返回false；
}
返回state.items.some（compareTag=>compareTag.key===tag.key）；
};
返回(
筛选建议中的项目：此选择器将从搜索建议中筛选添加的项目。
);
};