Question

我已经使用react Fetch API发出了POST请求，它可以按需运行，除了它替换了当前页面的网址。

发布功能：

String simpleName = Class.forName(ste.getClassName()).getSimpleName();

执行此函数时，它将我的网址替换为：

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函数由以下函数触发：

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

编辑3：

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

Answer 1

<button>内的

<form>个触发submit事件。如果不阻止submit事件使用event.preventDefault()触发默认操作，则表单将执行其正常操作；否则，表单将执行常规操作。将表单数据发布到您指定为action的{{1}}的任何URL上。

由于您尝试覆盖常规功能并以自己的方式提交数据，因此请告诉<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");
});

如何避免React Fetch API取代网址

1 个答案: