Блог

Я пытаюсь правильно ввести свой подключенный список обращений из algolia instant search.

Мой пользовательский компонент Hits:

 type Props = { hits: User[]; onSelectUser: (user: User) => void };

const SearchResults: React.FC<Props> = ({ hits, onSelectUser }) => {
  return hits.map((hit: User) => (
    <UserCard user={hit} onSelectUser={onSelectUser} />
  ));
};

export default connectHits<Props>(SearchResults);
  

Когда я пытаюсь использовать компонент:

 <Hits hitComponent={() => (<SearchResults onSelectUser={setSelectedUser} />)}/>
  

Я получаю сообщение об ошибке TS, что onSelectUser не существует в этом компоненте… Когда я игнорирую эту ошибку TS, я вижу, что реквизиты доступны внутри компонента SearchResults.

Как я должен правильно ввести свой компонент, чтобы убедиться, что типизация по-прежнему работает правильно?

Вы можете расширить HitsProvided интерфейс, доступный с помощью react-instantsearch-core .

 import { HitsProvided } from "react-instantsearch-core";

// ...

type Props = HitsProvided<UserRecord> amp; {
  onSelectUser: (user: User) => void;
};

const SearchResults: React.FC<Props> = ({ hits, onSelectUser }) => {
  return hits.map((hit: User) => (
    <UserCard user={hit} onSelectUser={onSelectUser} />
  ));
};

export default connectHits<Props, UserRecord>(SearchResults);
  

UserRecord будет описывать форму вашей записи (не форму попадания, возвращаемого API, а только атрибуты).