javascript - React/TypeScript：“MoviePoster”类型上不存在属性“actorsList”。TS2339

Question

我正在尝试为反应中的电影海报卡创建演员列表（基本上在反应中渲染 li 标签），但是我收到标题中描述的错误消息（下面的完整消息）并且不确定我是什么做错了。

界面：

  export interface MoviePoster {
  title: string;
  posterUrl: string;
  videoUrl: string;
  description: string;
  actorsList: string[];
}

海报卡片组件：

const PosterCard = (props: PosterCardProps) => {
const [isHover, setIsHover] = useState(false);
  const { posterUrl, title, description, actorsList } = props.moviePoster;
  const actors = actorsList.map((actor) => <li key={actor}>{actor}</li>);
return (
    <>
      <div style={styles.container} onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
          <ul>{actors}</ul>
        </div>
      </div>
      <MovieSnippetPopUp moviePoster={props.moviePoster} isHovered={isHover} />
    </>
  );
};

我使用 PosterCard 组件的主页：

const HomePage = (props: HomePageProps): JSX.Element => {
  const { theme } = props;

  const styles: Styles = {
    container: {
      background: theme.BACKGROUND,
      height: '100%',
      width: '100%',
    },
  };

  return (
    <div style={styles.container}>
      <Header theme={theme} />
      <PosterGrid
        moviePosters={[
          {
            posterUrl: 'https://images-na.ssl-images-amazon.com/images/I/61rv%2BRnsu6L._AC_.jpg',
            title: 'Avenger',
            videoUrl: '',
            description: 'Avenger',
            actorsList: ['Thor', 'Bob', 'Joe'],
          },
        ]}
      />
    </div>
  );
};

海报网格：

interface PosterGridProps {
  moviePosters: MoviePoster[]; //Creating an array of MoviePoster objects
}

const PosterGrid = (props: PosterGridProps): JSX.Element => {
  const { moviePosters } = props;

  const styles: Styles = {
    container: {
      display: 'block',
      height: 'fit-content',
      width: 'fit-content',
      padding: 'auto 0',
    },
    topPosterCardsContainer: {
      display: 'flex',
      height: 'fit-content',
      width: 'fit-content',
    },
    bottomPosterCardsContainer: {
      display: 'flex',
      height: 'fit-content',
      width: 'fit-content',
    },
  };

  const moviePosterCardsTop = moviePosters.map((value) => <PosterCard moviePoster={value} />).slice(0, 3);
  const moviePosterCardsBottom = moviePosters.map((value) => <PosterCard moviePoster={value} />).slice(3);

  return (
    <div style={styles.container}>
      <div style={styles.topPosterCardsContainer}>{moviePosterCardsTop}</div>
      <div style={styles.bottomPosterCardsContainer}>{moviePosterCardsBottom}</div>
    </div>
  );

错误消息 1：

Property 'actorsList' does not exist on type 'MoviePoster'.  TS2339

    13 | const PosterCard = (props: PosterCardProps) => {
    14 |   const [isHover, setIsHover] = useState(false);
  > 15 |   const { posterUrl, title, description, actorsList } = props.moviePoster;
       |                                          ^
    16 |   const actors = actorsList.map((actor) => <li>{actor}</li>);
    17 | 
    18 |   const styles: Styles = {

错误消息 2：

index.js:1 Warning: Each child in a list should have a unique "key" prop.

本质上，为了在 react 中创建一些列表标签，我创建了一个字符串列表，其中包含 MoviePoster 界面中所有演员的姓名，然后在列表标签​​中呈现该列表中的每个元素。

标签： javascriptreactjstypescriptjsx