React开发出现SyntaxError:Unexpected token, expected ","报错求排查

报错根因 #

你遇到的SyntaxError:Unexpected token, expected ","语法报错直接来自Toollsit组件的写法错误：

• return语句中直接在根级别写了{toto.map(...)}，外层的大括号没有被JSX标签包裹时，JS引擎会将其识别为对象字面量，对象结构需要逗号分隔属性，因此抛出预期逗号的错误。

除此之外代码还有多个会引发后续报错的问题：

• 函数组件参数接收错误：React组件的第一个参数是整体props对象，你当前写的function Toollsit(toto,title)会导致toto变量拿到完整props对象，而非传入的数组，后续调用map方法会报错。
• Toollsit组件中导入了App，会产生循环依赖，属于无用导入。
• 列表渲染没有添加唯一key属性，会触发React运行时警告。
• 语义化标签不规范：Toolitem中的<li>元素外层包裹了<div>，不符合HTML中<li>必须是<ul>/<ol>直接子元素的规范。
• App.js中导入React时拼写为小写react，不符合命名规范。

修复后代码 #

Toollsit 组件 #

import React from 'react';
import Toolitem from './Toolitem'

const styles = {
  ul: {
    listStyle: "none", 
    width: "300px"
  }
}

export default function Toollsit({ toto, title }) {
  return (
    <ul style={styles.ul}>
      {title && <h3>{title}</h3>}
      {toto.map((item) => <Toolitem key={item.id} toto={item} />)}
    </ul>
  );
};

Toolitem 组件 #

import React from 'react';

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

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应为拼写错误，建议改为ToolList，Toolitem改为ToolItem，统一组件大驼峰命名规范；变量toto可以改为语义更清晰的toolList或todoList，避免歧义。
• 可引入TypeScript为props添加类型约束，提前规避参数类型、结构错误。
• 样式复杂度上升后可以抽为单独的CSS/SCSS文件维护，比内联样式更易管理。
• 如果使用React17及以上版本，不需要显式在组件中导入React，可以去掉对应的导入语句。

内容的提问来源于stack exchange，提问作者Michael Hamar