“void”类型的参数不可分配给“SetStateAction<{}>”类型的参数

Question

我正在尝试使用 TMDB 使用 NextJS 和 Typescript 创建一个应用程序。

我有一个包含以下代码的 movie.ts 文件：

export async function getTrendMovies() {
    const url = 'https://api.themoviedb.org/3/trending/movie/day?language=en-US';
    const options = {
        method: 'GET',
        headers: {
            accept: 'application/json',
            Authorization: 'Bearer [my token]'
        }
    };

    try {
        const response = await fetch(url, options);
        const data = await response.json();
        console.log(data);
    } catch (err) {
        console.error('error:' + err);
    }
}

我想使用按钮来获取热门电影信息，因此，我的 page.tsx 文件中有以下代码：

'use client';
[imports...]

export default function Home() {
    interface MovieInfo {
        title: string;
        adult: boolean;
        original_language: string;
        overview: string;
        poster_path: string;
        vote_average: number;
        vote_count: number;
    }
    const [moviesInfo, setMoviesInfo] = useState<{}>({});

    async function getTrending(): Promise<void>{
        try {
            const info = await getTrendMovies();
            setMoviesInfo(info); //Here is where I'm getting the title error
      
        } catch (error) {
            console.error(error);
        }
    }

    return (
        <>
            <NavigationBar/>
            <MovieCard info={moviesInfo} />
            <Button onClick={() => getTrending()}>
                Generate
            </Button>
        </>
    
    );
}

我需要保存信息来创建卡片。 movie.ts 中的 console.log(data) 运行良好，并打印带有信息的数组，但现在我想使用 useState 将其保存到“info”中，我收到了该错误，并且真诚地不知道该怎么办

我阅读了很多文档，但没有得到任何有用的信息。 非常感谢你

Answer 1

看来您错过了退货声明。

  try {
    const response = await fetch(url, options);
    const data = await response.json();
    console.log(data);
    return data;
  } catch (err) {
    console.error('error:' + err);
  }

https://stackblitz.com/edit/stackblitz-starters-a63xvf