カートに入れました

Circular structure in "getInitialProps" result of page

error - node_modules/next/dist/pages/_document.js (544:22) @ Function.getInlineScriptSource
Error: Circular structure in "getInitialProps" result of page "/product". https://nextjs.org/docs/messages/circular-structure

エラーが出てしまった。。

import React from "react"
import ProductCard from "./ProductCard"

const Products = ({ prices }) => {
  // Group prices by product
  const products = {}
  for (const price of prices) {
    const product = price.product
    if (!products[product.id]) {
      products[product.id] = product
      products[product.id].prices = []
    }
    products[product.id].prices.push(price)
  }

  return (
    <div className="columns is-multiline">
      {/* {Object.keys(products).map(key => (
        <ProductCard key={products[key].id} product={products[key]} />
      ))} */}
    </div>
  )
}

export default Products

調べてみたところfor文のところでエラーが出ていた

下のようにuseEffectに入れたらエラーは解消された

import React, { useState, useEffect } from "react"
import ProductCard from "./ProductCard"

const Products = ({ prices }) => {
  // Group prices by product
  const [products, setProducts] = useState({})

  useEffect(() => {
    const pArr = {}
    for (const price of prices) {
      const product = price.product
      if (!pArr[product.id]) {
        pArr[product.id] = product
        pArr[product.id].prices = []
      }
      pArr[product.id].prices.push(price)
    }
    setProducts(pArr)
  }, [])

  return (
    <div className="columns is-multiline">
      {Object.keys(products).map(key => (
        <ProductCard key={products[key].id} product={products[key]} />
      ))}
    </div>
  )
}

export default Products