未定义的非对象的本地Algolia搜索

Question

import React, { Component } from "react";
import PropTypes from "prop-types";
import { View, StyleSheet, TextInput } from "react-native";
import algoliasearch from "algoliasearch/lite";
import { InstantSearch } from "react-instantsearch-native";
import {
  connectSearchBox,
  connectInfiniteHits,
  connectHits,
  connectAutoComplete,
  connectStateResults,
} from "react-instantsearch/connectors";
import { FlatList } from "react-native-gesture-handler";
class SearchBox extends Component {
  render() {
    return (
      <View style={styles.searchBoxContainer}>
        <TextInput
          style={styles.searchBox}
          onChangeText={(query) => {
            this.props.refine(query);
          }}
          placeholder={"Search Gangs"}
          clearButtonMode={"always"}
          clearButtonMode={"always"}
          spellCheck={false}
          autoCorrect={false}
          autoCapitalize={"none"}
        />
      </View>
    );
  }
}
const ConnectedSearchBox = connectSearchBox(SearchBox);
class InfiniteHits extends Component {
  onEndReached = () => {
    if (this.props.hasMore) {
      this.props.refine();
    }
  };
  render() {
    return (
      <FlatList
        renderItem={({ item }) => (
          <View>
            <Text>{item.basicData.selectedStudentName}</Text>
          </View>
        )}
        data={this.props.hits}
        keyExtractor={(item) => item.objectID}
        onEndReached={this.onEndReached}
        ItemSeparatorComponent={() => <View style={styles.ItemSeparator} />}
      />
    );
  }
}
const ConnectedInfiniteHits = connectInfiniteHits(InfiniteHits);
class SearchGangsAlgolia extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log(this.props);
    return (
      <View
        style={{
          flex: 1,
          alignItems: "center",
          flexDirection: "column",
          paddingTop: 20,
        }}
      >
        <InstantSearch
          appId=""
          apiKey=""
          indexName="criminals"
        >
          <ConnectedSearchBox />
          <ConnectedInfiniteHits />
        </InstantSearch>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default SearchGangsAlgolia;

在上面的代码中，我试图从中获取数据，作为搜索结果，但是，我在页面中得到了错误：“类型错误，未定义不是一个对象(计算'client.addAlgoliaAgent') --这个错误位于InstantSearch。我不知道要安装哪个npm包，还是要从任何一个中导入。但是它在快速搜索中抛出错误。

".

Answer 1

如果有人还在寻找答案，那么您得到此错误的原因是您没有将属性searchClient包含在InstantSearch组件中。

安装algoliasearch (npm安装算法搜索)并导入并使用它，如下所示：

import algoliasearch from "algoliasearch/lite";

创建searchClient，如下所示

 const searchClient = algoliasearch("appId", "apiKey");

最后，将其包含在InstantSearch组件中，如下所示：

  <InstantSearch
      appId=""
      apiKey=""
      indexName="criminals"
      searchClient={searchClient}
    >
       <ConnectedSearchBox />
      <ConnectedInfiniteHits />
    </InstantSearch>

对我来说很管用