未捕获(承诺中)TypeError:将循环结构转换为 JSON

Posted

技术标签:

【中文标题】未捕获(承诺中)TypeError:将循环结构转换为 JSON【英文标题】:Uncaught (in promise) TypeError: Converting circular structure to JSON 【发布时间】:2021-01-12 23:03:03 【问题描述】:

我在这里收到以下错误

  body: JSON.stringify(
  name,
  expiresAfterSeconds
)

TypeError:将循环结构转换为 JSON --> 从具有构造函数 'FiberNode' 的对象开始

问题似乎是循环结构无法使用 JSON stringify 进行转换。但是,我似乎无法找到使用圆形结构的地方。我在这里遗漏了什么吗?

循环结构示例: 变量 a = ; a.b = a;

fetchItems

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));

newItemForm()

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】:

试试

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

【讨论】:

以上是关于未捕获(承诺中)TypeError:将循环结构转换为 JSON的主要内容,如果未能解决你的问题,请参考以下文章

Angular:错误:未捕获(承诺):TypeError:Object(...)不是函数

未捕获(承诺中)TypeError:无法在已撤销的代理上执行“设置”

VueJS:未捕获(承诺中)TypeError:无法读取未定义的属性“推送”

text 错误:未捕获(在承诺中):TypeError:Object(...)不是函数

正确使用 Promise.resolve().then() 错误:未捕获(在承诺中):TypeError:无法读取属性

如何解决反应身份验证中的未捕获(承诺中)TypeError?