首页 > 解决方案 > SyntaxError:意外的令牌,预期的“,”

问题描述

自己出错

它在 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 组件 import React from 'react';

      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;

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

标签: javascriptreactjsdictionarysyntax-errorunexpected-token

解决方案


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

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

推荐阅读