React新手开发表单时遭遇Syntax error: Unexpected token, expected "{" (8:16)错误求助

嘿，刚接触React就碰到语法问题很正常，咱们一步一步来搞定它！

你遇到的Syntax error: Unexpected token, expected "{"错误，根源在于App组件的定义方式混用了函数声明和箭头函数的语法。你写的function App() =>(...)不符合JavaScript语法规范，这两种语法是不能混搭使用的。

两种正确的修正方案： #

方案1：使用函数声明语法

用function声明组件时，需要用大括号{}包裹函数体，通过return返回JSX内容：

import React from 'react';
import './App.css';
import Form from './components/Form.js';

const handleSubmit = values => alert(JSON.stringify(values));
const initialValues = {}

function App() {
  return (
    <div>
      <Form handleSubmit={handleSubmit} initialValues={initialValues} />
    </div>
  )
}

export default App;

方案2：使用箭头函数语法

如果想用箭头函数的简洁写法，需要先把组件赋值给一个变量，再用箭头函数定义：

import React from 'react';
import './App.css';
import Form from './components/Form.js';

const handleSubmit = values => alert(JSON.stringify(values));
const initialValues = {}

const App = () => (
  <div>
    <Form handleSubmit={handleSubmit} initialValues={initialValues} />
  </div>
)

export default App;

简单总结：要么用function 组件名() { ... }的写法，要么用const 组件名 = () => ...的写法，别把两者混在一起就没问题啦！

内容的提问来源于stack exchange，提问作者moid tera3