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

编程问答 2022-08-16

问题描述

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

界面： 

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

posterCard组件： 

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>
  );
};

PosterGrid： 

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',bottomPosterCardsContainer: {
      display: 'flex',};

  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,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界面中所有演员的名称，然后在列表标签​​中呈现该列表中的每个元素。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjsxjsxreactjsreactjstypescripttypescript