Typescript 和 React 对象数组并返回 JSX

Question

我今天刚开始一个小项目，学习TS及其让我抓狂的东西。我看了几个视频，但没有一个涵盖这个场景。

我在搜索后获取了一个电影列表，并试图在此文件中呈现它们的列表。

数据应当是对象的阵列，我看到了几个定义每个键的例子，比如标题：字符串、评级：数字等

我不想定义每一个键，因为这将需要很长时间。。。我只想让它检查它是否收到了一组对象

我的错误如下

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

这就是如何定义数据，然后将其传递到下方的组件中

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

电影列表.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 中删除类型定义，一切都会正常工作

Answer 1

组件的props中缺少类型声明。TypeScript不知道data对象中的元素具有Title属性。

你可以通过做这样的事情来解决这个问题：

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

此外，您使用useState的方式可能是错误的。可能应该是这样的：

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