React.js 'Unexpected token' < 使用表单标签时

Question

我一直在使用带有 babel、webpack、redux 和 semantic-ui-react 的 mern stack 制作一个网络应用程序。

但是我收到一条错误消息

"Unexpected token <" in bundle.js.

此错误仅在我发送单击表单标记中的按钮的请求时发生。如果我制作没有表单标签的页面，它可以正常工作，没有任何错误。

这是我在 React 中的代码。

handleUpload(title, contents, userId) {
  return this.props.createPostRequest(title, contents, userId).then(
    () => {
      if(this.props.post.status === 'SUCCESS') {
        alert('Your post is saved successfully.');
        browserHistory.push('/');
        return true;
      } else {
        alert('Save Fail: ' + this.props.post.failReason);
        return false;
      }
    }
  );
}

render() {
  return(
    <div className="Write">
      <br/>
      <br/>
      <Form>
        <Container text>
          <Form.Input label='Title' fluid name='title' placeholder='title'
            value={this.state.title} onChange={this.handleChange}>
            <input/>
          </Form.Input>
          <Form.TextArea rows='20' name='contents' placeholder='Write here!'
            value={this.state.contents} onChange={this.handleChange}>
            <textarea/>
          </Form.TextArea>
          <br/>
          <Button.Group>
            <Button color='orange' as={Link} to='/'>Cancel</Button>
            <Button.Or/>
            <Button positive onClick={this.handleUpload}>Save</Button>
          </Button.Group>
        </Container>
      </Form>
    </div>
  );
}

当我键入字母并单击保存按钮时，我可以看到一条警告消息，内容为

Your post is saved successfully..

而且我输入的数据也保存在mongodb中。但是在我点击确定之后，url 从 'localhost:3000/post/write' 变成了 'localhost:3000/post/write?title=blah&contents=blah'。 url 中的 blah 是我放入输入标签中的内容。然后控制台说

Unxpected token <.

但是，如果我在上面的代码中不使用 form 标签，它工作正常，我完全不知道有什么问题.. Form 标签来自 semantic-ui-react。所以我需要它。如果我不使用 Form，它可以正常工作，但我应该放弃 semantic-ui.

提供的设计

有谁知道这件事吗？我想这与表单标签中的 HTTP POST 有关，在服务器端处理 post 请求后，react.js 无法理解 index.html 中的 bundle.js来自该表单标签。

Answer 1

TL;DR

handleSubmit = (e) => e.preventDefault()

<Form onSubmit={this.handleSubmit} />

为什么？

默认情况下，HTML 表单将在提交时向当前 URI 发出 GET 请求，请参阅 here。同样默认情况下，表单中的按钮将提交它：

http://codepen.io/levithomason/pen/RpEwWP

<form onsubmit="alert('submitted!')">
  <button>I'll submit</button>
  <button>Me too</button>
</form>

发生的事情是，React 正在呈现一个 <form />，其中包含一些 <button />，当您单击它们时，它会向当前 URI 发出 GET 请求使用表单数据。

我敢打赌，为您的应用程序提供服务的本地服务器没有接受此请求的处理程序。更进一步，我敢打赌它还有一个回退，可以对未知请求做出 index.html 响应。这对于单页应用程序来说是司空见惯的，它允许应用程序的软路由来处理路由，而不是服务器。这可能导致您对 bundle.js 的请求实际收到 index.html，因此是意外的令牌。

既然你说了：

...if I don't use a form tag in above codes, it works fine...

简单地阻止表单提交应该可以为您解决。

React.js 'Unexpected token' < 使用表单标签时

React.js 'Unexpected token' < when using form tag

javascript

reactjs

webpack

babeljs

semantic-ui-react

TL;DR

为什么？