javascript - React native Algolia Search undefined is not an object

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;

在上面的代码中，我试图从 algolia 获取数据，作为搜索结果，但是，我在页面中收到错误为“类型错误，未定义不是对象（评估'client.addAlgoliaAgent'）这个错误是位于 InstantSearch。我不知道是要安装哪个 npm 包还是从任何 npm 包导入。但它在 Instantsearch 中抛出错误“。

Answer 1

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

安装 algoliasearch (npm install algoliasearch) 并导入它并像这样使用它：

import algoliasearch from "algoliasearch/lite";

创建 searchClient 如下

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

然后最后将它包含在您的 InstantSearch 组件中，如下所示：

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

它对我有用