Question

在我的NextJS应用中。我正在开发一个登录页面，现在出现以下错误。

未捕获到的SyntaxError：意外令牌<< / p>

以前没有出现过，昨天开始出现。我搜索了错误消息并浏览了许多SO答案，但没有一个有用。我删除了所有与onSubmit和onChange相关的代码，但该错误仍然存在。由于哪个代码导致此错误，我将在此处发布整个Login组件。

import React, { Component } from 'react';
import Heading from '../components/Heading';

class Login extends Component{

constructor(props) {
    super(props);
    this.onChangeInput = this.onChangeInput.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
        date: new Date().toJSON().slice(0,10),
        username: '',
        password: ''
    }
}

onChangeInput(e) {

    this.setState({
        [e.target.name]: e.target.value
    });
}

onSubmit(e) {
    e.preventDefault();
    const t = {
        date: new Date().toJSON().slice(0,10),
        username: this.state.username,
        password: this.state.password
    }
    fetch('/server', {
        method: 'POST',
        headers: {'Content-Type':'application/json'}, 
        body: JSON.stringify(this.state)
    })

    this.setState({
        username: '',
        password: ''
    });
}

render(){
    return(
        <div>
            <div style={{textAlign: "center"}}>
                <h1>PackMasters Ceylon (Pvt) Ltd</h1>
                <h2>Inventory Management System</h2>
                <h3>Login</h3>
            </div>
        <form onSubmit={this.onSubmit} onChange={this.onChangeInput} className={"col-md-4 col-md-offset-4"}>
            <Heading title="Login | PackMasters Ceylon (Pvt) Ltd" />
            <div className={"form-group"}>
                <label htmlFor="username">Username</label>
                <input type="text" name="username" value={this.state.username} className={"form-control"} id="username"/>
            </div>
            <div className={"form-group"}>
                <label htmlFor="passsword">Password</label>
                <input type="password" name="password" value={this.state.password} className={"form-control"} id="password" />
            </div>
            <div className={"form-group"}>
                <input type="submit" className={"form-control"} value="Log In"/>
            </div>
        </form>
        </div>
    );
}
}

export default Login;

Answer 1

经过很多努力后，我发现它是由浏览器缓存引起的。问题是在Chrome上清除浏览器缓存后解决的，但我仍然无法解释确切的原因，但是我会在这里提及如何清除Google Chrome浏览器上的缓存。

在计算机上，打开Chrome。
点击右上角的更多。
点击更多工具>清除浏览数据。
在顶部，选择一个时间范围。要删除所有内容，请选择“所有时间”。
选中“ Cookies和其他站点数据”和“缓存的图像和文件”旁边的框。
点击清除数据

Answer 2

一些问题：

更改处理程序应输入每个输入，而不是表单上
在构造函数中设置时间戳的好主意...似乎您已经朝着正确的方向前进...
如果将处理程序转换为箭头函数（无此上下文），则无需绑定到构造函数中（那只是一个旁注... ）

尝试一下：

a = [1,2,3,4,5];
a.__proto__.remove = index => { this.splice(index,1) };
a.remove(3);

编辑：添加一个then和catch块以进行提取：

import React, { Component } from 'react';
import Heading from '../components/Heading';

class Login extends Component {
  state = { username: '', password: '' };

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleSubmit = e => {
    e.preventDefault();
    const user = {
      date: new Date().toJSON().slice(0, 10),
      username: this.state.username,
      password: this.state.password,
    };
    fetch('/server', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user),
    });

    this.setState({ username: '', password: '' });
  };

  render() {
    return (
      <div>
        <div style={{ textAlign: 'center' }}>
          <h1>PackMasters Ceylon (Pvt) Ltd</h1>
          <h2>Inventory Management System</h2>
          <h3>Login</h3>
        </div>
        <form
          onSubmit={this.handleSubmit}
          className={'col-md-4 col-md-offset-4'}
        >
          <Heading title="Login | PackMasters Ceylon (Pvt) Ltd" />
          <div className={'form-group'}>
            <label htmlFor="username">Username</label>
            <input
              type="text"
              name="username"
              value={this.state.username}
              className={'form-control'}
              id="username"
              onChange={this.handleChange}
            />
          </div>
          <div className={'form-group'}>
            <label htmlFor="passsword">Password</label>
            <input
              type="password"
              name="password"
              value={this.state.password}
              className={'form-control'}
              id="password"
              onChange={this.handleChange}
            />
          </div>
          <div className={'form-group'}>
            <input type="submit" className={'form-control'} value="Log In" />
          </div>
        </form>
      </div>
    );
  }
}

export default Login;

另外，我注意到您正在使用Next.js ...您需要安装fetch('/server', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user), }).then(res => res.json()) .then(response => console.log('Success:', JSON.stringify(response))) .catch(error => console.error('Error:', error)); https://github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch

Answer 3

对于以下流程，请确保您的“ esversion”：6 为 6 。

对于Mac VSCode：代码（左上角）=>首选项=>设置=>用户设置。并在右侧检查并在下面的代码中写

{
  "workbench.colorTheme": "Visual Studio Dark",
  "git.ignoreMissingGitWarning": true,
  "window.zoomLevel": 0,
  // you want to write below code for that
  "jshint.options": {
      "esversion":6
  },
}

登录表单上的“未捕获的SyntaxError：意外令牌<”

3 个答案: