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]必须使用道具id，以使Menu对于辅助技术（例如屏幕阅读器）的用户可以访问。我尝试使用谷歌搜索，但未找到任何解决方案。

有关开发者控制台的屏幕截图，请参见下文

您可以在上方的 options 数组中看到来自搜索API的结果

修复后更新用户界面

Answer 1

由于您的选项对象具有标题，请在AsyncTypeahead中使用labelKey="title"。此外，在SearchResultMenuItem中更改<span>{item.title}</span>，同时也更改道具title: PropTypes.string.isRequired。这样可以解决问题。另外，要删除ID警告，只需为AsyncTypeahead组件（例如id="some_unique_id"）提供唯一的ID名称（可以是任何随机ID）

屏幕上未显示AsyncTypeahead结果

1 个答案: