Блог

Здесь я получаю следующую ошибку

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

Ошибка типа: преобразование циклической структуры в JSON
—> запуск объекта с конструктором ‘FiberNode’

Проблема, по-видимому, в том, что циклические структуры не могут быть преобразованы с помощью 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));
}
  

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
  

попробуйте с

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