javascript next.js getStaticProps序列化问题

qij5mzcb  于 2023-02-02  发布在  Java
关注(0)|答案(1)|浏览(145)

我在一个项目中使用next.js,其中getStaticProps中的axios获取似乎不起作用,即使URL在配置中被序列化。我尝试通过将响应传递给JSON.parse再次序列化,但仍然找不到解决方案。
从"axios"导入axios;从"qs"导入Q;

    • 我的axios配置代码如下:**
const axiosTmdbApi = axios.create({
      baseURL: "https://api.themoviedb.org/3",
      headers: { "content-Type": "application/json/" },
      paramsSerializer: {
        serialize: (params) =>
          Qs.stringify({ ...params, api_key: apiKey }, { arrayFormat: "brackets" }),
      },
    });```

**My category which is passed as a parameter to invoke getTvList or getMovieList data below:**

import axiosTmdbApi from "./axiosTmdbApi";
export const category = {
  movie: "movie",
  tv: "tv",
};

export const type = {
  top_rated: "top_rated",
  popular: "popular",
};

const tmdbApi = {
  getTvList: (tvType, params) => {
    const url = "tv/" + type[tvType];
    return axiosTmdbApi.get(url, params);
  },
  getMovielist: (movieType, params) => {
    const url = "movie/" + type[movieType];
    return axiosTmdbApi.get(url, params);
  },
};

export default tmdbApi;```
    • 使用getStaticProps获取我的API**

从文件"../../api/tmdbApi"导入tmdbApi;从"../../api/tmdbApi"导入{类型,类别};

const Movies = ({ data }) => {
      console.log(data);
      return (
        <>
          <h1 className="bg-success">Movies</h1>
          
        </>
      );
    };
    
    export default Movies;

    export async function getStaticProps() {
      let params = {};
      let response;
    
      response = await tmdbApi.getMovielist(type.popular, {
        params,
      });
      const data = JSON.parse(JSON.stringify(response));
    
    
      return {
        props: { data },
      };
    }```

 
**Error :index.js?46cb:602 Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'ClientRequest'
    |     property 'socket' -> object with constructor 'TLSSocket'
    --- property '_httpMessage' closes the circle **
vyu0f0g1

vyu0f0g11#

尝试添加console.log并查看每个阶段处理的值。您应该执行const data = response.data,而不是const data = JSON.parse(JSON.stringify(response))
并将return语句更改为

return {
    props: { data: data || [] },
  };

相关问题