Блог

Я пытаюсь использовать tagPicker из fluent ui. Я использую в качестве отправной точки образец с сайта: https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers

Проблема в том, что объект, который у меня есть, имеет 3 реквизита. объектами в массиве являются {Code:’строка’, Title:’строка’, Category:’строка’}. Я использую состояние с 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 amp;amp; !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>
  );
};
 

Я только что понял, мне нужно сопоставить элементы, чтобы они следовали {ключ, имя} из образца. Теперь это работает.

 setStateObj({items:state.map(item => ({ key: item, name: item.Code })),isLoading:false})