reactjs - AsyncTypeahead 结果未显示在屏幕上

Question

我一直在尝试从 react-bootstrap-typeahead 库中集成 AsyncTypeahead 功能。我正在尝试将其与 TheMovieDB search 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;

预期结果

我希望将电影名称列表显示为可供选择的选项，这些名称来自 TheMovieDB 的 api 查询的响应。

实际结果

UI 简单在屏幕上显示未找到匹配项消息。

我在控制台上收到一条警告消息:警告:[react-bootstrap-typeahead] The prop id需要制作 Menu屏幕阅读器等辅助技术的用户可以访问。我试过谷歌搜索这个，但没有找到任何解决方案。

请参阅下面的来自开发者控制台的屏幕截图




您可以在上面的选项数组中查看搜索 api 的结果

修复后更新 UI

Answer 1

请使用 labelKey="title"在 AsyncTypeahead 中，因为您的选项对象具有标题。此外，在 SearchResultMenuItem 中更改 <span>{item.title}</span> ，也改变了 Prop title: PropTypes.string.isRequired .这应该可以解决问题。此外，要删除 id 警告，只需为 AsyncTypeahead 组件提供一个唯一的 id 名称，例如 id="some_unique_id" (它可以是任何随机ID)