Arrays TypeScript不允许我在对象数组上映射时实现参数接口

我试图映射一个对象数组，为每个对象创建一个新的列表项组件，然后在组件中使用一些键/值对来显示信息（如果有），但是，当我尝试在JavaScript映射方法的参数中实现接口时，我得到以下TypeScript错误：

类型为“”的接口IMovieDBData参数（电影：IMovieDBData，索引：编号）=>JSX.Element“”不可分配给类型为“”的参数（值：字符串，索引：编号，数组：字符串[]）=>Element'。参数“movie”和“value”的类型不兼容。类型“string”不可分配给类型“IMovieDBData”.ts（2345）

我不知道如何修复它，以下是我的代码：

interface IMovieDBData {
  adult: boolean;
  backdrop_path: string;
  genre_ids: Array<number>;
  id: number;
  original_language: string;
  original_title: string;
  overview: string;
  popularity: number;
  poster_path: string;
  release_date: string;
  title: string;
  video: boolean;
  vote_average: number;
  vote_count: number
}

接口IMovieDBData{
成人：布尔型；
路径：字符串；
类型标识：数组；
id：编号；
原始语言：字符串；
原始标题：字符串；
概述：字符串；
受欢迎程度：数量；
海报路径：字符串；
发布日期：字符串；
标题：字符串；
视频：布尔；
平均投票数：数字；
计票：数目
}

这是接口的数据：

粗体是给出错误的map方法的位置：

        {(view === 'carousel' && movieList.length > 0 && showListing === true) &&
          <Carousel
            navButtonsAlwaysVisible={true}
            index={activeChild}
            autoPlay={false}
            timeout={300}
            animation={'slide'}
            next={(next: number) => {
              (next === 2 && page === 1) && setCarouselEdgeCaseBoolean(true);
              (next === 0 && carouselEdgeCaseBoolean) && handlePageChange('click', page + 1);
            }}
            prev={(prev: number) => {
              (prev === movieList.length - 1 && page === 1) && setCarouselEdgeCaseBoolean(false);
              (prev === movieList.length - 1 && page !== 1) && handlePageChange('click', page - 1);
            }}
          >
          {
            **movieList.map((movie: IMovieDBData, index: number) => <CarouselItem key={index} movie={movie}** />)
          }
          </Carousel>
        }

{（视图==='carousel'&&movieList.length>0&&showListing===true）&&
{
（next==2&&page==1）&&setCarouselEdgeCaseBoolean（true）；
（下一步===0&&carouselEdgeCaseBoolean）&&handlePageChange（'click'，第+1页）；
}}
prev={（prev:number）=>{
（prev==movieList.length-1&&page==1）&&setCarouselEdgeCaseBoolean（false）；
（prev==movieList.length-1&&page！==1）&&handlePageChange（'click'，page-1））；
}}
>
{
**movieList.map（（电影：IMovieDBData，索引：number）=>）
}
}

这是我每次映射时尝试创建的组件：

interface IMovieListItemProps {
  movie: IMovieDBData;
}

// Component for listing movies in the carousel view
const CarouselItem = (props: IMovieListItemProps) => {

  const MOVIE_POSTER_API_URL = "https://image.tmdb.org/t/p/w500/";
  const [openMovieDbData, setOpenMovieDbData] = useState<Array<string>>([]);

  useEffect((): void => {
    axios.get(`http://www.omdbapi.com/?t=${props.movie.title}&y=${props.movie.release_date && props.movie.release_date.substr(0, 4)}&apikey=${process.env.REACT_APP_OPEN_MOVIE_API_KEY}`)
    .then(response => {
      setOpenMovieDbData(response.data);
    })
    .catch((error) => console.log('OpenMovieDB HTTP GET Request Error response:', error));
  }, []);

  return (
    <Paper style={{padding: "30px"}} elevation={50}>
      <h2>{props.movie.title}</h2>
      <p>{props.movie.overview}</p>
      <div>Release Date: {props.movie.release_date ? props.movie.release_date : 'N/A'} </div>
      <div>{openMovieDbData['Ratings'] ? openMovieDbData['Ratings'].map((rating: {Source: string, Value: string}, index: number) => (<div key={index}>{rating.Source}: {rating.Value}</div>)): 'No Reviews '}</div>
      <div>Runtime: {openMovieDbData['Runtime'] ? openMovieDbData['Runtime'] : 'N/A'}</div>
      <div>{openMovieDbData['Director'] ? `Directed by: ${openMovieDbData['Director']}` : 'Director not listed. '}</div>
      <div>{openMovieDbData['Actors'] ? `Actors: ${openMovieDbData['Actors']}` : 'Actors not listed. '}</div>
      <div>Rated: {openMovieDbData['Rated'] ? openMovieDbData['Rated'] : 'N/A'}</div>
      <img alt={'Poster for ' + props.movie.title} src={MOVIE_POSTER_API_URL + props.movie.backdrop_path} />
    </Paper>
  );
};

接口IMovieListItemProps{
电影：iMoviedBata；
}
//用于在旋转木马视图中列出电影的组件
const CarouselItem=（道具：IMovieListItemProps）=>{
const MOVIE\u POSTER\u API\u URL=”https://image.tmdb.org/t/p/w500/";
常量[openMovieDbData，setOpenMovieDbData]=useState（[]）；
useffect（（）：void=>{
axios.get(`http://www.omdbapi.com/?t=${props.movie.title}&y=${props.movie.release\u date&&props.movie.release\u date.substr（0,4）}&apikey=${process.env.REACT\u APP\u OPEN\u movie\u API\u KEY}）
。然后（响应=>{
setOpenMovieDbData（response.data）；
})
.catch（（错误）=>console.log（'OpenMovieDB HTTP GET请求错误响应：'，错误））；
}, []);
返回(
{道具.电影.标题}
{道具。电影。概述}

发布日期：{props.movie.Release_Date？props.movie.Release_Date:'N/A'}
{openMovieDbData['Ratings']？openMovieDbData['Ratings'].map（（评级：{Source:string，Value:string}，index:number）=>（{rating.Source}:{rating.Value}））：'No Reviews'}
运行时：{openMovieDbData['Runtime']？openMovieDbData['Runtime']：'N/A'}
{openMovieDbData['Director']？`导演：${openMovieDbData['Director']}`:'未列出导演。}
{openMovieDbData['Actors']？`Actors:${openMovieDbData['Actors']}`:'Actors not list.}
额定值：{openMovieDbData['Rated']？openMovieDbData['Rated']：'N/A'}
);
};

---

当我将类型设置为任何类型时，这可能是值得注意的。当然，这并不是我们使用Type Script的原因。

请考虑将此代码转换为可以放入独立IDE中以演示您所看到的内容的代码。现在看来TS认为movieList是字符串数组，而不是对象数组。为什么？不确定，我没有足够的信息来复制。@jcalz谢谢你，就是这样，我已经将状态类型设置为useState（[]）而不是useState（[]），没有想到我的错误是there@jcalz回答你的第二句话，这样我就可以相信你了