2

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

但我得到一个错误说

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

当我输入字母并单击保存按钮时，我会看到一条警告消息说

您的帖子已成功保存..

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

意外的令牌 <。

但是，如果我不在上面的代码中使用表单标签，它工作正常，我完全不知道有什么问题。表单标签来自语义 UI 反应。所以我需要它。如果我不使用 Form，它可以正常工作，但我应该放弃语义 UI 提供的设计。

有没有人知道这件事？我猜这与表单标签中的 HTTP POST 有关，这使 react.js 在服务器端处理来自该表单标签的发布请求后难以理解 index.html 中的 bundle.js。

4

1 回答 1

0

TL;博士

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

<Form onSubmit={this.handleSubmit} />

为什么？

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

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

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

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

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

既然你说：

...如果我不在上面的代码中使用表单标签，它工作正常...

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

于 2017-03-30T19:04:08.817 回答