时间戳

首页 > 解决方案 > Typescript & React 对象数组并返回 JSX

reactjs - Typescript & React 对象数组并返回 JSX

问题描述

我今天刚刚开始了一个小项目来学习 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 中删除类型定义，一切都会按预期工作

标签： reactjstypescript

解决方案

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

您可以通过执行以下操作来解决此问题：

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

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

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

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

推荐阅读