当前位置: 首页 > 知识库问答 >
问题:

未捕获(在promise)类型错误:将圆形结构转换为JSON

长孙雅志
2023-03-14

我在这里收到以下错误

  body: JSON.stringify({
  name,
  expiresAfterSeconds
})

TypeError:将循环结构转换为JSON--

问题似乎是圆形结构不能使用JSON stringify转换。然而,我似乎找不到我使用圆形结构的地方。我是不是漏了什么?

示例循环结构:var a={};a、 b=a;

取东西

async function fetchItems(name, expiresAfterSeconds) {
  const newItemData = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name,
      expiresAfterSeconds
    })
  };
  const response = await fetch('/api/add-item', newItemData)
    .then(response => response.json())
    .then(data => console.log(data));
}

新信息

const NewItemForm = () => {
  const [itemData, setItemData] = React.useState({
    name: '',
    expiresAfterSeconds: ''
  });
  const handleSubmit = (e) => {
    e.preventDefault();
    fetchItems(itemData.name, itemData.expiresAfterSeconds)
  }
  return (
    <form onSubmit={handleSubmit}>
      <div className="form-row">
        <div className="form-group col-md-8">
          <label htmlFor="formItemName">Item name</label>
          <input
            type="text"
            className="form-control"
            id="formItemName"
            aria-describedby="itemNameHelp"
            placeholder="yummy food"
            value={itemData.name}
            onChange={(e) => { setItemData({ ...itemData, name: e.target.value }) }}
          />
          <small id="itemNameHelp" className="form-text text-muted">
            We don't want more than one piece of the same food in our fridge.
        </small>
        </div>
      </div>
      <div className="form-row">
        <div className="form-group col-sm-3">
          <label htmlFor="formExpiresAfterSeconds">Expires after</label>
          <div className="input-group">
            <input
              type="text"
              className="form-control"
              id="formExpiresAfterSeconds"
              aria-label="Expires in"
              aria-describedby="basic-addon2"
              value={itemData.expiresAfterSeconds}
              onChange={(e) => { setItemData({ ...itemData, expiresAfterSeconds: e.target.value }) }}
            />
            <div className="input-group-append">
              <span className="input-group-text" id="basic-addon2">
                seconds
            </span>
            </div>
          </div>
        </div>
      </div>
      <button type="submit" className="btn btn-primary" onClick={fetchItems}>
        Submit
    </button>
    </form>
  )
};

编辑-完全错误

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'FiberNode'
    |     property 'stateNode' -> object with constructor 'HTMLButtonElement'
    --- property '__reactInternalInstance$xcvrnuhmmp' closes the circle

共有1个答案

韦高阳
2023-03-14

试一试

body: JSON.stringify({
  name : name,
  expiresAfterSeconds : expiresAfterSeconds
})
 类似资料:
  • 我有一个带JSON.stringify的tableDnD拖放: 我收到以下错误消息: 未捕获的类型错误:将圆形结构转换为JSON 我只有Chrome问题。

  • 问题内容: 我有以下… 该调用以下。 但是,我的代码永远不会到达“ ZOMG HERE”,而是在运行时抛出以下错误 有谁知道是什么原因造成的? 问题答案: 这意味着您在请求中传递的对象(我想是)具有循环引用,例如: 无法转换这样的结构。 注意 :DOM节点就是这种情况,即使没有将它们附加到DOM树,它们也具有循环引用。在大多数情况下 ,每个节点都有一个。具有通过至少一个参考DOM树和指回再次,这是

  • 问题内容: 为了进行调试,我想使用JSON.stringify(myobject)序列化javascript对象。但这给出了: 有没有办法防止这种情况发生,例如修剪输出树? 更多背景: 我想收集有关不同对象的一些数据,并查看发生了什么,以及为什么某个功能适用于一种情况而不适用于另一种情况。通过比较输出,我希望能够找到差异,这可以解释为什么它在“另一”情况下不起作用。我正在使用jquery,我的调试

  • 我对Vue相当陌生,我一直在尝试如何使用Axios调用Java API。 vue.config.js dashboard.vue 然而,无论我如何尝试,它总是给出错误: 在这个错误中,我编辑了dashboard.vue:19的路径,但它来自那里。这行给出了错误:。 API运行在localhost端口8080上,Vue应用程序运行在localhost端口3000上。我不确定是我做错了跨原点还是完全不

  • 无法找出导致未捕获TypeError的原因:将循环结构转换为JSON。我有表格(1个输入字段和提交按钮) 提交_frm.js代码: google chrome控制台显示,错误源于js文件中的var data=JSON. stringify(e);行。我将感谢任何帮助解决这个错误。