如何为类型记录中的API数据创建接口？

Question

因此，我从TMDb API(电影)获得数据，我的App.js如下所示：

const App = () => {

  const [movies, setMovies] = useState<MovieType[]>([]); //state for setting movies to api data

  useEffect(() =>{
    fetchMovies();
  }, [])

  async function fetchMovies() {   //function for fetching data
    try{
      let apikey = '{api_key}';
      let url: string = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=';
      url = url + apikey;
      const response = await axios.get<MovieResults[]>(url);
      setMovies(response.data.results);    //and here I get an error: Property 'results' does not exist on type 'MovieResults[]'
    }catch(e){
      alert(e);
      console.log(movies);
    }
}

  return (
    <div className="App">
      <Header/>
      <Hero movies={movies}/>
    </div>
  );
}

我的类型和接口：

export type MovieType = {
        vote_average: string,
        title: string,
        tagline: string,
        date: string,
        img: File,
    };

export type MovieResults = {
    results: MovieType[],
};

export interface MovieProps {
     movies: MovieType[],
      };

如您所见，我有类型和接口，我创建了用于传递道具的MovieType，以及用于从API获取结果的MovieResults。但是，当我试图将电影设置为api数据时，我遇到了一个错误：Property 'results' does not exist on type 'MovieResults[]' --它很奇怪，因为我实际上在MovieResults中有“结果”属性。

Answer 1

我想你是想做axios.get<MovieResults>的。如果您执行axios.get<MovieResults[]>，它将需要一个MovieResults数组，我认为这不是您想要的。

如果您使用MovieResults[]作为类型，则基本上期望data如下所示

[
  { results: ... }, 
  { results: ... }, 
  { results: ... }, 
  .
  .
  .
]

因此，您正在尝试从未定义的数组中读取results。

但是，如果您使用MovieResults作为类型，则data的格式如下

{
  results: ...
}

在这里，您正在从一个对象读取results。