Блог

Главная - Вопросы по программированию - Машинописный и реагирующий массив объектов и возврат JSX

Машинописный и реагирующий массив объектов и возврат JSX

#reactjs #typescript

#reactjs #typescript

Вопрос:

Я только что начал небольшой проект сегодня, чтобы изучить TS, и это сводит меня с ума. Я просмотрел пару видеороликов, но ни одно из них не охватывало этот сценарий.

Я извлекаю список фильмов после поиска и пытаюсь отобразить их список в этом файле.

данные должны представлять собой массив объектов, я видел пару примеров, которые определяли каждый ключ, такой как title: строка, rating: число и т. Д

Я не хочу определять каждый ключ, поскольку это займет вечность… все, что я хочу, это проверить, получил ли он массив объектов

моя ошибка заключается в следующем

 Property 'Title' does not exist on type '{}'.  TS2339

Вот как определяются данные, а затем передаются в приведенный ниже компонент

   const [searchResults, setSearchResults] = useState<Array<{}>>([])

MovieList.tsx

 import React from "react";
import { Container, Row, Col } from "react-bootstrap";

interface Props {
  data: Array<{}>;
}

const MovieList: React.FC<Props> = ({ data }) => {

  const renderMovies = () => {
    if (data.length !== 0) {
      return data.map((movie) => {
        return <Row>{movie.Title}</Row>;
      });
    }
  };

  return <Container>{renderMovies()}</Container>;
};

export default MovieList;

Все работает так, как ожидалось, если я удалю определения типов из MovieList.tsx

Ответ №1:

Вам не хватает объявления типа в реквизитах вашего компонента. TypeScript не знает, что элементы в data объекте имеют Title свойство.

Вы могли бы исправить это, выполнив что-то вроде:

 type MovieListProps= {
  data: // your type here
}

const MovieList: React.FC<Props> = ({ data }: MovieListProps) => {
  ...
}

Кроме того, способ, который вы используете useState , может быть неправильным. Вероятно, это должно быть что-то вроде:

 const [searchResults, setSearchResults] = useState<Array<YourTypeHere>>([])

Комментарии:

1. я попробовал ввести MovieListProps= { data: object[{Title:string}]; } получил ошибку типа ‘{ Title: string; }’, которая не может использоваться в качестве типа индекса. TS2538 У меня также есть другой компонент, где мне не нужно было использовать объявление типа, а просто использовать интерфейс. нужен ли здесь тип, потому что это объект?

2. Я не знаю точно, какие у вас реквизиты, но, вероятно, это должно быть что-то вроде type MovieListProps= { data: {Title:string}[] }