How to avoid React fetch API replacing url

Question

I've made a POST request with the react Fetch API, it works as desired, except for the fact that it replaces the url of the current page.

Post Function:

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

When this function execute, it replace my url with:

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

I don't know why this happens, as i used this API before, and i didn't have this problem. If anyone can give me any help, i would appreciate it.

Thanks in advance, have a great week!

Edit 1:

I create the note object like this:

const newNote = {id: 0, name: note.name, description: note.description, author_id: note.author_id, author: note.author };

Edit 2:

The postNote function is triggered by this function:

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

Edit 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>

I don't see how this is possible. Is the URL hardcoded, or is it populated from a variable of some sort. I'd console.log that variable, and make sure it's intended for port 9000. — Blue
– Blue, Commented Feb 4, 2019 at 17:58
You need to show more of the code involved. The fetch by itself is not going to cause the URL of the current page to be changed. How is the fetch being triggered? — Ryan Cogswell
– Ryan Cogswell, Commented Feb 4, 2019 at 18:01
Is this triggered by a <form> submit? Are you preventing the default? — zero298
– zero298, Commented Feb 4, 2019 at 18:12

zero298 · Accepted Answer · 2019-02-04 18:39:52Z

<button>s within <form>s trigger submit events. If you don't prevent that submit event from triggering the default action using event.preventDefault(), the form will do it's normal action; posting the form data to whatever URL you specified as the action of the <form>.

Since you are trying to override the normal functionality and submit the data your own way, tell the <form> not to do it's normal action.

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>

Collectives™ on Stack Overflow

How to avoid React fetch API replacing url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related