node.js - 当我尝试从 HomeScreen 打开产品时出现以下错误 - 将循环结构转换为 JSON -->
问题描述
当我单击 HomeScreen.js 中的产品时,该产品应将我带到 ProductScreen 以显示产品详细信息,但出现以下错误。
将循环结构转换为 JSON --> 从具有构造函数“NativeTopology”的对象开始 | 属性“s”-> 带有构造函数“对象”的对象 | 属性“sessionPool”-> 带有构造函数“ServerSessionPool”的对象---属性“拓扑”关闭了圆圈
以下是我正在运行的代码
ProductConstants.js
export const PRODUCT_DETAILS_REQUEST = "PRODUCT_DETAILS_REQUEST";
export const PRODUCT_DETAILS_SUCCESS = "PRODUCT_DETAILS_SUCCESS";
export const PRODUCT_DETAILS_FAIL = "PRODUCT_DETAILS_FAIL";
productDetailsReducer --Reducer
import {
PRODUCT_DETAILS_REQUEST,
PRODUCT_DETAILS_SUCCESS,
PRODUCT_DETAILS_FAIL,
} from "../constants/productConstants";
export const productDetailsReducer = (
state = { product: { reviews: [] } },
action
) => {
switch (action.type) {
case PRODUCT_DETAILS_REQUEST:
return { loading: true, ...state };
case PRODUCT_DETAILS_SUCCESS:
return { loading: false, product: action.payload };
case PRODUCT_DETAILS_FAIL:
return { loading: false, error: action.payload };
default:
return state;
}
};
listProductDetails -- Action
import axios from "axios";
import {
PRODUCT_DETAILS_REQUEST,
PRODUCT_DETAILS_SUCCESS,
PRODUCT_DETAILS_FAIL,
} from "../constants/productConstants";
export const listProductDetails = (id) => async (dispatch) => {
try {
dispatch({ type: PRODUCT_DETAILS_REQUEST });
const { data } = await axios.get(`/api/products/${id}`);
dispatch({
type: PRODUCT_DETAILS_SUCCESS,
payload: data,
});
} catch (error) {
dispatch({
type: PRODUCT_DETAILS_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
ProductScreen.js
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import { Row, Col, ListGroup, Image, Button, Card } from "react-bootstrap";
import Ratings from "../components/Ratings";
import { useDispatch, useSelector } from "react-redux";
import { listProductDetails } from "../actions/productActions";
import Loader from "../components/loader";
import Message from "../components/message";
const ProductScreen = ({ match }) => {
const dispatch = useDispatch();
const productDetails = useSelector((state) => state.productDetails);
const { loading, error, product } = productDetails;
useEffect(() => {
dispatch(listProductDetails(match.params.id));
}, [dispatch, match]);
return (
<>
<Link className="btn btn-light my-3" to="/">
Go Back
</Link>
{loading ? (
<Loader />
) : error ? (
<Message>{error}</Message>
) : (
<Row>
<Col md={6}>
<Image src={product.image} alt={product.name} fluid />
</Col>
<Col md={3}>
<ListGroup variant="flush">
<ListGroup.Item>
<h3>{product.name}</h3>
</ListGroup.Item>
<ListGroup.Item>
<Ratings
value={product.rating}
text={`${product.numReviews} reviews`}
/>
</ListGroup.Item>
<ListGroup.Item>Price: ${product.price}</ListGroup.Item>
<ListGroup.Item>
Description: ${product.description}
</ListGroup.Item>
</ListGroup>
</Col>
<Col md={3}>
<Card>
<ListGroup variant="flush">
<ListGroup.Item>
<Col>Price:</Col>
<Col>
<strong>{product.price}</strong>
</Col>
</ListGroup.Item>
<ListGroup.Item>
<Col>Stock:</Col>
<Col>
{product.countInStock > 0 ? "In Stock" : "Out of Stock"}
</Col>
</ListGroup.Item>
<ListGroup.Item>
<Button
class="btn btn-block"
type="button"
disabled={product.countInStock === 0}
>
Add to Cart
</Button>
</ListGroup.Item>
</ListGroup>
</Card>
</Col>
</Row>
)}
</>
);
};
export default ProductScreen;
解决方案
您遇到此问题的原因是您作为第二个参数传递给函数的对象之一对其自身或指向该对象的其他对象具有循环引用。如果不是所有的都有循环引用,你可以用 try/catch 包装序列化来避免你的程序崩溃。
因此,我们得到一个运行时错误,说我们有循环引用:
未捕获的类型错误:将循环结构转换为 JSON --> 从具有构造函数“对象”的对象开始 | property 'someRef' -> object with constructor 'Object' --- property 'someRef' 闭合圆圈
那是因为 JSON 在设计上不能序列化循环数据结构。
推荐阅读
- php - 使用php读取文件时如何执行某些计算
- python - 从非 conda jupyter 安装访问 conda python 内核
- ios - 以编程方式实现 Swift 演示风格
- javascript - 我想在我想要的时间每天两次重新开始倒计时
- azure-devops-server - 如何将 tfs2012 升级到 Azure devops 服务器
- r - 将函数应用于列表后保留列表元素的名称
- python - 从我的 django 模型中获取所有用户的问题
- java - 如何使用杰克逊解析对象数组?
- node.js - NPM Install导致随机包需要支付402
- vue.js - vue CLI 3 公共路径部署在网络服务器中