SyntaxError：意外的令牌，预期的“，”答案

【问题标题】：SyntaxError:Unexpected token, expected ","SyntaxError：意外的令牌，预期的“，”
【发布时间】：2021-11-08 22:07:04
【问题描述】：

Error it self

How it looks in VScode

这就是 Toollsit 组件

import React, { Component } from 'react';
 import Toolitem from './Toolitem'
 import App from '../App';
  const styles = {
  ul:{
    listStyle:"none", 
     width:"300px"
    }
  }


  export default  function Toollsit(toto,title){
  return(
   {toto.map((toto)=>{return (<Toolitem toto={toto} />)})} 
  );
 };

这就是 Toolitem 组件从“反应”导入反应；

      const Toolitem = ({toto}) => {
         return (
             <div>
                <li>
                 {toto.title}
                </li>
              </div>
              );
            };

            export default Toolitem;

这就是我的 App.js

       import react from 'react';
       import Toollsit from './components/Toollsit'
         function App(props) {
           const toto =[
            {id:1,title:'First',completed:true},
            {id:2,title:'Second',completed:false},
            {id:3,title:'Third',completed:true},
         ];
             return (
                <span className="wrapper">
                 <Toollsit toto={toto} />
                </span>
               );
              }

          export default App;

感谢您的帮助，评论家我非常感谢您的反馈

【问题讨论】：

如果Toollsit 是一个功能组件，您可能打算将toto 和title 作为单个props 对象传递，例如function Toollsit({ toto, title })

标签： javascript reactjs dictionary syntax-error unexpected-token

【解决方案1】：

您必须将map 函数放在<React.Fragment> 标记中（等效：<>）。此外，参数应该是被破坏的对象。

  export default  function Toollsit({toto, title}){
  return(<>
   {toto.map((toto)=>{return (<Toolitem toto={toto} />)})} 
  </>);
 };

【讨论】：