0

我正在使用 TagPicker 动态获取数据并呈现一组与该术语匹配的结果。问题是查看文档没有明确的指示如何确定组件数据正在加载或搜索。删除了这些的界面（ISuggestionsProps）并且 loadingText 道具似乎对我不起作用，或者我可能使用错误。

以下是我如何将列表中的数据加载到标签选择器中：

const filterSuggestedTags = async (filterText: string, tagList: ITag[]) => {
    //* possibly here to call an api if needed?
    if (filterText) {
      const url = 'url'
      const resp = await fetch(url,{method:'GET',headers:{Accept:'application/json; odata=verbose'}})
      return (await resp.json()).d.results.map(item => ({ key: item, name: item.Title }));
    } else return []
  };

代码笔： https ://codepen.io/deleite/pen/MWjBMjY ?editors=1111

这显然有很多问题，首先也是最糟糕的，每次击键都是一个 Promise 被触发。那么，问题是如何使用搜索词调用 api 并产生建议？

谢谢你们。

4

2 回答 2

0

好的，您可以使用道具“resolveDelay”缓解此问题，但我仍然没有找到任何标准方法来处理来自 api 的项目，这是我提出的最接近的方法。

任何样品或想法将不胜感激。

于 2021-01-10T11:20:21.400 回答
0

我正在使用 Office ui Fabric react v5（“office-ui-fabric-react”：“^5.135.5”）。我正在使用 TagPicker 加载外部 API 数据（解析时间长，数据集大）。加载建议延迟 700 毫秒（按键后）。输入 3 个字符后会触发加载建议。在加载过程中，可以看到加载圆圈。我正在页面中加载 20 条建议的建议，如果底部有更多要加载的项目，则会加载更多锚点，它会加载另一个页面并向已加载的内容添加新建议。我不得不扩展 IBasePickerSuggestionsProps 接口以获得 moreSuggestionsAvailable?: boolean; 在 BasePicker.types.d.ts 基于这个问题：https ://github.com/microsoft/fluentui/issues/6582

文档：https ://developer.microsoft.com/en-us/fluentui#/components/pickers

代码笔： https ://codepen.io/matej4386/pen/ZEpqwQv

这是我的代码：

const {disabled} = this.props;
const {
selectedItems,
    errorMessage
} = this.state;   
<TagPicker 
onResolveSuggestions={this.onFilterChanged}
getTextFromItem={this.getTextFromItem}
resolveDelay={700}
pickerSuggestionsProps={{
    suggestionsHeaderText: strings.suggestionsHeaderText,
    noResultsFoundText: strings.noresultsFoundText,
    searchForMoreText: strings.moreSuggestions,
    moreSuggestionsAvailable: this.state.loadmore
}}
onGetMoreResults={this.onGetMoreResults}
onRenderSuggestionsItem={this.onRenderSuggestionsItem}
selectedItems={selectedItems}
onChange={this.onItemChanged}
itemLimit={1}
disabled={disabled}
inputProps={{
    placeholder: strings.TextFormFieldPlaceholder
}} 
/>
private onFilterChanged = async (filterText: string, tagList:IPickerItem[]) => {
if (filterText.length >= 3) {
  let resolvedSugestions: IPickerItem[] = await this.loadListItems(filterText);

  const {
    selectedItems
  } = this.state;

  // Filter out the already retrieved items, so that they cannot be selected again
  if (selectedItems && selectedItems.length > 0) {
    let filteredSuggestions = [];
    for (const suggestion of resolvedSugestions) {
      const exists = selectedItems.filter(sItem => sItem.key === suggestion.key);
      if (!exists || exists.length === 0) {
        filteredSuggestions.push(suggestion);
      }
    }
    resolvedSugestions = filteredSuggestions;
  }
  if (resolvedSugestions) {
    this.setState({
      errorMessage: "",
      showError: false,
      suggestions: resolvedSugestions,
      loadmore: true,
      loadMorePageNumber: 1
    });

    return resolvedSugestions;
  } else {
    return [];
  }
} else {
  return null
}
}
private onGetMoreResults = async (filterText: string, selectedItems?: any[]): Promise<IPickerItem[]> => {
let arrayItems: IPickerItem[] = [];
try {
  
    let listItems: IOrganization[] = await this.GetOrganizations(this.Identity[0].id, filterText, 1);
  ...
private loadListItems = async (filterText: string): Promise<IPickerItem[]> => {
let { webUrl, filter, substringSearch } = this.props;
let arrayItems: IPickerItem[] = [];

try {
...
于 2021-01-12T11:13:24.710 回答