Я пытался интегрировать функциональность AsyncTypeahead из библиотеки реагировать на начальную загрузку.Я пытаюсь использовать это с TheMovieDB поиск API .Я могу видеть из вывода консоли разработчика, что я делаю запросы API, и результаты передаются обратно в компонент AsyncTypeahead, но он говорит: «Не найдено ни одного совпадения».на моем экране.
Я скопировал большую часть кода из их github для реализации AsyncTypeahead и даже вижу, что результаты отклика передаются в опции компонента Typeahead.Поэтому я не уверен, что мне не хватает, чтобы они отображались на экране, как в их примерах.
Мой компонент реализации поиска
import React from 'react';
import {AsyncTypeahead} from 'react-bootstrap-typeahead';
import axios from 'axios';
import SearchResultMenuItem from './SearchResultMenuItem';
//Needs to be a class based component, as we have to handle state
class SearchBar extends React.Component {
state = {
term: '',
options: [],
isLoading: false
};
onFormSubimit = (event) => { //Arrow function makes sure the value of 'this' is always the instance of the search bar
event.preventDefault(); //Stops browser from submitting form automatically and refreshing the pagee
this.props.onSubmit(this.state.term);
}
onHandleSearch = async (term) => {
this.setState({isLoading: true});
const response = await axios.get('https://api.themoviedb.org/3/search/movie?api_key=c055530078ac3b21b64e0bf8a0b3b9e1&language=en-US&page=1&include_adult=false', {
params: { query: term }
});
//Extract details from the search
const searchResults = response.data.results.map((i) => ({
title: i.original_title,
id: i.id,
}));
this.setState({
isLoading: false,
options: searchResults
})
}
render() {
return (
<div className="ui segment">
<form onSubmit={this.onFormSubimit} className="ui form">
<div className="field">
<label>Image Search</label>
<AsyncTypeahead
{...this.state}
labelKey="original_title"
isLoading={this.state.isLoading}
onSearch={this.onHandleSearch}
placeholder="Enter a Movie Title..."
renderMenuItemChildren={(option, props) => (
<SearchResultMenuItem key={option.id} item={option} />
)}
/>
</div>
</form>
</div>
);
}
}
export default SearchBar;
Мой компонент SearchResultMenuItem
import PropTypes from 'prop-types';
import React from 'react';
const SearchResultMenuItem = ({item}) => (
<div>
<img
style={{
height: '24px',
marginRight: '10px',
width: '24px',
}}
/>
<span>{item.original_title}</span>
</div>
);
SearchResultMenuItem.propTypes = {
item: PropTypes.shape({
original_title: PropTypes.string.isRequired,
}).isRequired,
};
export default SearchResultMenuItem;
Ожидаемые результаты
Я ожидаю, что список названий фильмов будет отображаться как варианты выбора, которые будут получены из ответа на запрос API-интерфейса TheMovieDB.
Фактические результаты
Простой пользовательский интерфейс отображает на экране сообщение Совпадений не найдено .
В консоли появляется предупреждающее сообщение: Предупреждение: [response-bootstrap-typeahead] Пропеллер id необходим, чтобы сделать Menu доступным для пользователей вспомогательных технологий, таких как программы чтения с экрана. Я попытался найти это, но не нашел никаких решений.
Ниже приведены скриншоты с консоли разработчика 
Результаты поиска API можно найти в options array выше
Update UI After Fix
