React native Algolia Search undefined is not an object答案

【问题标题】：React native Algolia Search undefined is not an objectReact native Algolia Search undefined is not an object
【发布时间】：2020-11-26 09:53:21
【问题描述】：

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" 中抛出错误。

【问题讨论】：

你解决了吗？

标签： javascript reactjs react-native algolia react-instantsearch

【解决方案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>

它对我有用

【讨论】：