关于箭头函数报错的问题

遇到的问题

出问题的代码：

import React from "react";
import axios from "axios";
import ToggleHeader from "./ToggleHeader";
import {
	Button,
	Form,
} from "reactstrap";

export const Toggle = ({ setQuestionData })	
						=> {
						const getData = async () =>{
							try{
								const incomingData = await axios.get('https://opentdb.com/api.php?amount=10&category=18&difficulty=easy&type=multiple');
								setQuestionData(incomingData.data.results);
							}catch(e){
								console.log(e);
							}
							};
							return (
							<>
							<ToggleHeader></ToggleHeader>
							<Form onSubmit = {(e) => {
								e.preventDefault();
								getData();} } >
							<Button color="primary">开始</Button>
							</Form>
							</>
              );
						};

原因

箭头函数的箭头 =>必须紧跟在括号（）后面，否则无法识别为一个箭头函数

解决思路

由于我在代码中把箭头函数写成了

{ setQuestionData })	
						=> 

导致了函数无法被识别为箭头函数

将箭头函数的箭头放到括号后面

({ setQuestionData })	=> {
								...
							}

保存后

bug解决！

总结

箭头函数的箭头必须紧跟在括号后面，否则会导致无法识别箭头函数而报错。