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

问题描述

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

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

当我尝试在控制台-> console.log（query）中返回“查询”时，出现未定义的错误。我不明白为什么。

这是我的完整代码：

App.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;

Autocomplete.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);

解决方法

经过几次尝试，我求助于直接向阿尔戈利亚询问。

这是他们发送给我的沙箱：

https://codesandbox.io/s/quirky-darwin-4u2o2?file=/src/App.js

问题在于“ newValue”道具。您需要将其替换为“ suggestion”，并将状态设置为“ suggestion.valueToReturn”。