如何解决 React 错误：解析错误：意外令牌答案

【问题标题】：how to solve an React error: Parsing error: Unexpected token如何解决 React 错误：解析错误：意外令牌
【发布时间】：2020-07-05 08:35:31
【问题描述】：

我正在尝试按照以下方式将名为 react-phone-number-input 的库与我的多步反应表单集成：

import React, {useState} from 'react'
import Helmet from 'react-helmet'
import './reg-style/Credentail.css'
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'

export default function Credential (){
    continue = e => {
        e.preventDefault();
        this.props.nextStep();
      };

      back = e => {
        e.preventDefault();
        this.props.prevStep();
      };

          const [ values, handleChange ] = this.props;
          const [value, setValue] = useState()
        return (
            <div>
                  <Helmet>
                  <body className="form-bg-col"></body>
                </Helmet>


                <div className="login">
                  <div className="reg-container">
                  <button onClick={this.back} className="col-form-prev"><i class="fa fa-chevron-left"></i></button>
                  <div className="user-detail email">
                      Email:
                      <input onChange={handleChange('Email')} defaultValue={values.Email}  type="email" placeholder="Enter your Email"/>
                  </div>
                  <div  className="user-detail" 
                  onChange={handleChange('Phone')} defaultValue={values.Phone}
                  >
                      Phone:
                      <PhoneInput
                        displayInitialValueAsLocalNumber
                        placeholder="Enter phone number"
                        defaultCountry="IN"
                        value={value}
                        onChange={setValue}
                        />

                  </div>
                  <div className="user-detail username">
                      Username:
                      <input onChange={handleChange('Username')} defaultValue={values.Username} type="text" placeholder="Select your unique Username" />
                  </div>
                  <div className="user-detail password">
                      Password:
                      <input onChange={handleChange('Password')} defaultValue={values.Password} type="password" placeholder="Choose your Password" />
                  </div>

                  <button onClick={this.continue} className="col-form-next"><i class="fa fa-chevron-right"></i></button>


                  </div>

                </div>
            </div>
        )

}

在运行它时，我收到一个错误：

 `./src/form/register/Credential.js
  Line 9:14:  Parsing error: Unexpected token

   7 | 
   8 | export default function Credential (){
>  9 |     continue = e => {
     |              ^
  10 |         e.preventDefault();
  11 |         this.props.nextStep();
  12 |       };`

我应该怎么做才能摆脱这个错误，你的帮助对我来说非常宝贵

【问题讨论】：

标签： reactjs react-redux react-context react-state-management unexpected-token

【解决方案1】：

continue 是 javascript 中的保留关键字。

所以只需为您的方法使用不同的名称。

另一个问题是您似乎正在使用在类中声明方法的语法。由于您现在使用的是function，因此您必须声明您的变量，并且在使用它们时您不应使用this.back，而应使用back，因为它不是对象的一部分，只是一个局部变量。

import React, { useState } from "react";
import Helmet from "react-helmet";
import "./reg-style/Credentail.css";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";

export default function Credential() {
  const alter = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  const back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

  const [values, handleChange] = this.props;
  const [value, setValue] = useState();
  return (
    <div>
      <Helmet>
        <body className="form-bg-col" />
      </Helmet>

      <div className="login">
        <div className="reg-container">
          <button onClick={back} className="col-form-prev">
            <i class="fa fa-chevron-left" />
          </button>
          <div className="user-detail email">
            Email:
            <input
              onChange={handleChange("Email")}
              defaultValue={values.Email}
              type="email"
              placeholder="Enter your Email"
            />
          </div>
          <div
            className="user-detail"
            onChange={handleChange("Phone")}
            defaultValue={values.Phone}
          >
            Phone:
            <PhoneInput
              displayInitialValueAsLocalNumber
              placeholder="Enter phone number"
              defaultCountry="IN"
              value={value}
              onChange={setValue}
            />
          </div>
          <div className="user-detail username">
            Username:
            <input
              onChange={handleChange("Username")}
              defaultValue={values.Username}
              type="text"
              placeholder="Select your unique Username"
            />
          </div>
          <div className="user-detail password">
            Password:
            <input
              onChange={handleChange("Password")}
              defaultValue={values.Password}
              type="password"
              placeholder="Choose your Password"
            />
          </div>

          <button onClick={alter} className="col-form-next">
            <i class="fa fa-chevron-right" />
          </button>
        </div>
      </div>
    </div>
  );
}

【讨论】：

一个建议：您关于使用Continue 的观点对于功能组件似乎是正确的，但是当我将它用于基于类的组件时，它似乎运行良好。而且现在如果我将continue 更改为alter 之类的东西，它的抛出和错误alter 和back 是未定义的，这实际上是受到Multi Step Form With React & Material UI by Traversy Media 的启发，但只是试图集成一个库
@RahulAhire 是的。您不应该直接使用this.back，而应该直接使用back，并且还应该声明用于函数的变量。所以在alter和back之前添加const。
我现在尝试了你的方法，但这给了我一个错误：TypeError: Cannot read property 'props' of undefined ``` 75 |导入“反应电话号码输入/style.css”； 76 |从“react-phone-number-input”导入 PhoneInput； 77 | > 78 |导出默认函数 Credential() { 79 |常量改变 = e => { 80 | e.preventDefault(); 81 | this.props.nextStep();```
@Rahul，您将不得不重新访问有关功能组件的文档。你不应该使用this。 props也应该成为组件函数的参数。