Блог

Я пытаюсь создать список актеров (в основном, отображающих теги li в react) для постера фильма в react, однако я получаю сообщение об ошибке, как описано в названии (полное сообщение ниже), и не уверен, что я делаю неправильно.

Интерфейс:

   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',
      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, а затем отображать каждый элемент в этом списке в теге list.