Как избежать замены URL в React fetch API

Question

Я сделал POST-запрос с реагирующим Fetch API, он работает как нужно, за исключением того факта, что он заменяет URL-адрес текущей страницы.

Функция публикации:

  postNote(note) {
    console.log('Posting note');

    fetch('http://localhost:9000/notes/create', {
      mode: 'cors',
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(note)
    })
  }

При выполнении этой функции мой URL-адрес заменяется на:

http://localhost:3000/?name=nameExample&description=descExample

Я не знаю, почему это происходит, так как я использовал этот API раньшеи у меня не было этой проблемы.Если кто-нибудь может оказать мне какую-либо помощь, я был бы признателен.

Заранее спасибо, хорошей недели!

Редактирование 1:

Я создаю объект заметки, как этот:

const newNote = {id: 0, имя: note.name, описание: note.description, author_id: note.author_id, автор: note.author};

Редактировать 2:

Функция postNote запускается этой функцией:

addNote = note => {
        const newNote = {id: 0, name: note.name, description: note.description, author_id: note.author_id, author: note.author };
        this.setState({
            notas: [...this.state.notas, newNote]
        });
        console.log(newNote);

        this.postNote(newNote);
    }

Редактировать 3:

<button className="btn btn-primary" onClick={() => {
      let newNote = { id: 0, name: this.name, description: this.description, author_id: this.author_id, author: this.author }
      noteContainer.addNote(newNote)
      }
 }>
      Save
</button>

Answer 1

<button> с в пределах <form> с триггером submit событий.Если вы не помешаете этому событию submit вызвать действие по умолчанию, используя event.preventDefault(), форма выполнит обычное действие;отправка данных формы по любому URL, который вы указали как action из <form>.

Поскольку вы пытаетесь переопределить обычную функциональность и отправлять данные по-своему, скажите <form> не выполнять это обычное действие.

document.getElementById("foo").addEventListener("submit", e => {
  e.preventDefault();

  // If the e.preventDefault() weren't there,
  // you would navigate to some.html on the Stack Snippets host
  // (it doens't exist so you actually get a 404 or something

  console.log("Hello");
});

document.getElementById("bar").addEventListener("click", e => {
  e.preventDefault();

  // Same thing here, except we prevent the click
  // event from triggering the submit event higher up

  console.log("World");
});

<form id="foo" action="some.html">
  <button>Click Me</button>
</form>

<form action="some.html">
  <button id="bar">Click Me 2</button>
</form>