NextJS 和 Redux-thunk：出现“错误：“getInitialProps”中的循环结构”答案

【问题标题】：NextJS and Redux-thunk: Getting 'Error: Circular structure in "getInitialProps"'NextJS 和 Redux-thunk：出现“错误：“getInitialProps”中的循环结构”
【发布时间】：2023-03-07 20:26:01
【问题描述】：

我正在尝试实现一个简单的测试用例，以便将 Redux-thunks 与 Next JS 一起使用，但不断收到错误

错误：页面“/”的“getInitialProps”结果中的循环结构。 https://err.sh/zeit/next.js/circular-structure

我之前已经让这一切工作了一次，我确信我犯了一些明显的错误。我很感激你能提供的任何帮助。我已经戳了一个小时，但我没有看到我哪里出错了......

我已将其追溯到我的 thunk 中的调度，即 action-creators.js 中以下代码中的 dispatch(getItemsSuccess(data))。也就是说，如果我删除该调度，我不会收到错误消息。

  // action-creators.js
    import {GET_ITEMS_SUCCESS} from "./action-types"
    import axios from 'axios'

export const getItemsSuccess = (data) => ({ type: GET_ITEMS_SUCCESS, data });

export const getItems = () => async (dispatch,getState) => {
  try {
    const data = await axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=12345xyz`)
    return dispatch(getItemsSuccess(data))
  } catch(e) {
    console.log(`error in dispatch in action-creators: ${e}`)
  }
}

我的 _app.js 是

import React from 'react'
import {Provider} from 'react-redux'
import App, {Container} from 'next/app'
import withRedux from 'next-redux-wrapper'
import configureStore from '../redux/configure-store'

class MyApp extends App {
  static async getInitialProps({Component, ctx}) {
    let pageProps = {}
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return {pageProps}
  }

  render() {
    const {Component, pageProps, store} = this.props
    return (
      <Container>
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      </Container>
    )
  }
}

export default withRedux(configureStore, { debug: true })(MyApp);

我的 index.js 是

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {getItems} from "../redux/action-creators"

class Index extends Component {
  static async getInitialProps({store}) {
    try {
      await store.dispatch(getItems())
    } catch(e) {
      console.log(`error in dispatch in index.js: ${e.message}`)
    }
  }

  render() {
    return <div>Sample App</div>
  }
}

export default connect(state => state)(Index)

最后我这样配置商店

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './root-reducer';

const bindMiddleware = middleware => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension');
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

function configureStore(initialState = {}) {
  const store = createStore(
    rootReducer,
    initialState,
    bindMiddleware([thunk]),
  );
  return store;
}

export default configureStore;

再次，非常感谢任何帮助 - 我已经研究了一段时间，但没有看到丢失的部分......

【问题讨论】：

标签： reactjs redux react-redux redux-thunk next.js

【解决方案1】：

当你从 axios 返回数据时，必须访问数据中的数据，也就是说，而不是

常量数据 = 等待

axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=12345xyz`)
return dispatch(getItemsSuccess(data))

我应该写的

axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=12345xyz`)
return dispatch(getItemsSuccess(data.data))

【讨论】：

【解决方案2】：

为什么会发生此错误

getInitialProps 使用JSON.stringify 序列化为 JSON，并发送到客户端以对页面进行水合。

但是，getInitialProps 返回的结果在具有循环结构时无法序列化。

可能的修复方法

不支持循环结构，因此修复此错误的方法是从 getInitialProps 返回的对象中删除循环结构。在您的情况下，您只需要像@Cerulean 解释的那样提取适当的数据。

【讨论】：