reactjs - Algolia 自动完成小部件不返回“查询”值？为什么

问题描述

我试图在我的代码中实现 Algolia Autocomplete 小部件。我目前正在尝试使用查询回调来检索道具“值”。

我在这里使用 Algolia 代码：https ://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/autocomplete/react/

当我试图在控制台中返回“查询”时 --> console.log(query) 我得到一个未定义的错误。我不明白为什么。

这是我的整个代码：

应用程序.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import algoliasearch from "algoliasearch/lite";
import {
    InstantSearch,
    Configure,
    Hits,
    Highlight,
    connectSearchBox,
} from "react-instantsearch-dom";
import Autocomplete from "./autocomplete";
import "./App.css";

const VirtalSearchBox = connectSearchBox(() => null);

const searchClient = algoliasearch(
    "Z62FGCMHZD",
    "9a68937c02faa1182e49eb5c0737e009",
);

class App extends Component {
    state = {
        query: "",
    };

    onSuggestionSelected = (_, { suggestion }) => {
        this.setState({
            query: suggestion.name,
        });
    };

    onSuggestionCleared = () => {
        this.setState({
            query: "",
        });
    };

    render() {
        const { query } = this.state;

        return (
            <div className="container">
                <h1>React InstantSearch - Results page with autocomplete</h1>
                <InstantSearch indexName="Radium_test" searchClient={searchClient}>
                    <Configure hitsPerPage={5} />
                    <Autocomplete
                        onSuggestionSelected={this.onSuggestionSelected}
                        onSuggestionCleared={this.onSuggestionCleared}
                    />
                </InstantSearch>
                {console.log(query)}
            </div>
        );
    }
}

function Hit(props) {
    return (
        <div>
            <Highlight attribute="section_text" hit={props.hit} />
        </div>
    );
}

Hit.propTypes = {
    hit: PropTypes.object.isRequired,
};

export default App;

自动完成.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Highlight, connectAutoComplete } from "react-instantsearch-dom";
import AutoSuggest from "react-autosuggest";

class AutoComplete extends Component {
    static propTypes = {
        hits: PropTypes.arrayOf(PropTypes.object).isRequired,
        currentRefinement: PropTypes.string.isRequired,
        refine: PropTypes.func.isRequired,
        onSuggestionSelected: PropTypes.func.isRequired,
        onSuggestionCleared: PropTypes.func.isRequired,
    };

    state = {
        value: this.props.currentRefinement,
    };

    onChange = (_, { newValue }) => {
        if (!newValue) {
            this.props.onSuggestionCleared();
        }

        this.setState({
            value: newValue,
        });
    };

    onSuggestionsFetchRequested = ({ value }) => {
        this.props.refine(value);
    };

    onSuggestionsClearRequested = () => {
        this.props.refine();
    };

    getSuggestionValue(hit) {
        const searchResult = hit.section_number + "  " + hit.section_text;
        return searchResult;
    }

    renderSuggestion(hit) {
        return (
            <div className="row">
                <div className="col-1" style={{ paddingLeft: "20px" }}>
                    <Highlight attribute="section_number" hit={hit} tagName="em" />
                </div>
                <div className="col-11">
                    <Highlight attribute="section_text" hit={hit} tagName="em" />
                </div>
            </div>
        );
    }

    render() {
        const { hits, onSuggestionSelected } = this.props;
        const { value } = this.state;

        const inputProps = {
            placeholder: "Search for a product...",
            onChange: this.onChange,
            value,
        };

        return (
            <div>
                <AutoSuggest
                    suggestions={hits}
                    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                    onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                    onSuggestionSelected={onSuggestionSelected}
                    getSuggestionValue={this.getSuggestionValue}
                    renderSuggestion={this.renderSuggestion}
                    inputProps={inputProps}
                />
            </div>
        );
    }
}

export default connectAutoComplete(AutoComplete);

标签： reactjssearchautocompletealgolia

reactjs - Algolia 自动完成小部件不返回“查询”值？为什么

问题描述

解决方案

推荐阅读