ncaught TypeError:将循环结构转换为JSON -这里的问题是什么?

Question

这是错误

表单在数据库中没有更新。它显示以下错误

const handleAddItem = (event) => {
event.preventDefault();
const productName = productNameRef.current.value;
const price = priceRef.current.value;
const description = descriptionRef.current.value;
const quantity = quantityRef.current.value;
const img = imgRef.current.value;
// console.log(productName, price, description, quantity, img);
const url = `http://localhost:5000/item`;
fetch(url, {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(event)
})
.then(res=> res.json())
.then(result =>{
console.log(result);
})
}

下面是处理表单提交的代码部分。表单是一个基本的HTML表单。这段代码显示了上面提到的包含错误的错误片段。请需要一些帮助来解决这个问题。谢谢你. .

Answer 1

正如你的屏幕截图中的错误提示，你有一个循环依赖在JSON对象你试图字符串化。

如果你注意到，你在handleAddItem方法中收到的event参数实际上是一个HTML事件(它可能是KeyboardEvent或MouseClickEvent或PointerEvent…等)。事件携带大量信息，包括与之交互的元素的信息。元素的相关信息可以包含循环依赖关系，因为元素引用最终可以包含对其自身的引用。

它看起来像在你的情况下，因为你在React中工作，由React Fiber (React的底层算法)提供的信息存储在事件中，在一个名为stateNode的字段上，当你做JSON.stringify(event)时，它包括一个循环引用。

你应该怎么做你应该避免尝试字符串化一个事件，而是使用本地状态(通过useState或你的useRefrefs，你有像产品名称等)和构造一个对象，而不是发送到你的API，像这样:

fetch(url, {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
productName, price, description, quantity, img})
})

你不需要发送一个HTML事件到你的API;你应该使用干净的object/json数据，它包含了你需要的东西。