reactjs应用程序中出现意外的令牌错误

Question

I'm using react-jsonschema-form to display and validiate form and while creating custom validation found in the Unexpected tocken error in the line which is having "..." syntax. Please find the below code

import React, { Component } from "react";
import { render } from "react-dom";

import Form from "react-jsonschema-form";

const SchemaForm = JSONSchemaForm.default;

let schema = {
 type: "string",
title: "FirstName",
minLength: 12,
required: true,
messages: {
required: "Please enter your First name",
minLength: "First name should be > 5 characters"
}
 };

  const MySchemaForm = props => {

  const transformErrors = errors => {
  return errors.map(error => {

  if (error.schema.messages && error.schema.messages[error.name]) {
    return {
      ...error,
      message: error.schema.messages[error.name]
    };
  }
  return error;
 });
 };

 return (
<SchemaForm
  { ...props }
  schema={schema}
  liveValidate
  showErrorList={false}
  transformErrors={transformErrors}
 / >
);
 };

class App extends React.Component {
 constructor(props) {
super(props);
this.state = {formData: {}};
 }
 onSubmit({formData}) {
this.setState({formData});
}
 render() {
  return (
  <div>
    <MySchemaForm formData=""/>
  </div>
);
}
}

React.render(<App />, 
         document.getElementById("app"));

Im getting the error at the line where "...error". Can anyone help me to resolve this issue.

Answer 1

You need to use a plugin if you're going to use the ... rest/spread operator. Here's the babel plugin:

https://babeljs.io/docs/plugins/transform-object-rest-spread/