使用表單標簽時React.js'意外令牌'<

Question

我一直在使用帶有babel，webpack，redux和語義UI反應的mern堆棧制作一個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 ”。 等等是我在輸入標簽中放的東西。 然后控制台說

意外令牌<。

但是，如果我在上面的代碼中不使用form標簽，它就可以正常工作，我完全不知道這是怎么回事。Form標簽來自語義UI反應。 所以我需要。 如果我不使用Form，它將很好用，但是我應該放棄語義UI提供的設計。

有誰知道這個嗎？ 我想這與表單標簽中的HTTP POST有關，在服務器端處理來自該表單標簽的發布請求之后，這使React.js難以理解index.html中的bundle.js。

Answer 1

TL; DR

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呈現了一個<form /> ，其中包含一些<button /> ，當您單擊它們時，它正在使用表單數據向當前URI發出GET請求。

我敢打賭，我敢打賭，正在為您的應用提供服務的本地服務器沒有處理程序來接受此請求。 更進一步，我敢打賭，它還有一個回退功能，可以響應未知請求使用index.html響應。 對於單頁應用程序來說，允許應用程序的軟路由器而不是服務器來處理路由是很平常的事。 這可能導致您對bundle.js的請求實際上接收到index.html ，因此出現了意外的令牌。

既然您已經說過：

...如果我在上述代碼中未使用表單標簽，則可以正常工作...

只需阻止表單提交即可為您解決。