Как я могу использовать Поиск с конечной точкой API в качестве моего источника? Возможно ли это с помощью semantic-ui-реакции? - PullRequest
Новая
       13

Как я могу использовать Поиск с конечной точкой API в качестве моего источника? Возможно ли это с помощью semantic-ui-реакции?

0 голосов
/ 01 ноября 2018

Я хотел бы использовать конечную точку API для получения результатов поиска в реагирующем семантическом интерфейсе. Пока приведенные примеры работают с местным источником. Тот, который, по-видимому, реализует API, через Semantic-UI использует jquery. Semantic-UI-React , похоже, не содержит примеров, когда результаты могут поступать из API.

Пока у меня есть handleSearchChange, извлекающий данные из API в состояние. Затем я передаю данные ответа своим результатам: 

handleSearchChange = (e, { value }) => {
const { fetchAPIData, response } = this.props;
fetchAPIData(value);
this.setState({ isLoading: true, value, results: response });

setTimeout(
  () =>
    this.setState({
      isLoading: false
    }),
  300
);

};

Затем я вызываю resultRenderer, передавая мой источник, который отображает результаты через Grid и / или даже List. 

return (
  <Search
    fluid
    placeholder="Search"
    style={searchWidth}
    loading={isLoading}
    minCharacters={2}
    showNoResults={false}
    selectFirstResult={false}
    resultRenderer={source}
    onResultSelect={this.handleResultSelect}
    onSearchChange={this.handleSearchChange}
    results={results}
    value={value}
  />
);

Кажется, это работает и загружает результаты, когда происходит поиск. Тем не менее, я считаю, так как это всего лишь взлом, я получаю эту ошибку консоли: 

index.js:2178 Warning: Failed prop type: The prop `title` is marked as
required in `SearchResult`, but its value is `undefined`.

Я хорошо понимаю ошибку, но я не хочу использовать свой источник с заголовком, описанием, ценой и т. Д., Поскольку мой результат исходит из API.

Другая ошибка: 

Warning: Each child in an array or iterator should have a unique "key" 
prop.

Я попытался добавить ключ как: 

const source = ({ id, username }) => (
  <Grid key={id} content={username}
......
......
......
);

и или: 

const source = ({ id, username }) => (
  <List key={id} content={username} />
);

Но это не решает.

Таким образом, мой вопрос таков: возможно ли использовать API с поиском в Semantic-UI-React и, если да, то как его можно эффективно реализовать?

Спасибо

...