【问题标题】：reactjs Unexpected token, expected ","reactjs 意外的令牌，预期的“，”
【发布时间】：2021-02-07 02:17:45
【问题描述】：

我创建了一个 react 应用程序，当我遇到此错误时，我正在学习遍历数组。Unexpected token, expected ","。我受到 react-redux 官方项目的启发：https://codesandbox.io/s/9on71rvnyo 现在我失败了，需要一些帮助才能跳转.谢谢

import { useContext, useState } from "react";
import { StoreContext } from "../index";
import { FaAppleAlt } from "react-icons/fa";
import { AiFillApple } from "react-icons/ai";

export const TodoList = () => {
  const { store } = useContext(StoreContext);
  const [title, setTitle] = useState();
  return (
    <>
      <h1>To Do List</h1>
      <input type="text" onChange={(e) => setTitle(e.target.value)} />
      <button onClick={(f) => f}>AddTodo</button>
      <div>
        <ul style={{list-style-type:"none"}}>
          {store.getState().todolist.map((item, i) 
          => { <li key={i}>item.icon+item.title</li>}
           
          ))}
        </ul>
      </div>
      <button
        onClick={(f) => f}
        style={{
          border: "none",
          backgroundColor: "inherit",
          padding: "14px",
          fontSize: "15px",
          cursor: "pointer",
          display: "inline-block"
        }}
      >
        All
      </button>

      <button
        onClick={(f) => f}
        style={{
          border: "none",
          backgroundColor: "inherit",
          padding: "14px",
          fontSize: "15px",
          cursor: "pointer",
          display: "inline-block"
        }}
      >
        Completed
      </button>

      <button
        onClick={(f) => f}
        style={{
          border: "none",
          backgroundColor: "inherit",
          padding: "14px",
          fontSize: "15px",
          cursor: "pointer",
          display: "inline-block"
        }}
      >
        Incompleted
      </button>
    </>
  );
};

完整项目链接：https://codesandbox.io/s/react-redux-template-forked-ex2ym?file=/src/components/TodoList.js

【问题讨论】：

我没有发现任何问题，但我可能会错过它。错误发生在哪一行？这是你的全部代码吗？
@HolyMoly，我想你需要在这里：codesandbox.io/s/react-redux-template-forked-ex2ym?file=/src/…

标签： reactjs react-redux react-hooks

【解决方案1】：

问题

您似乎有一个额外的右括号和一些其他语法问题（箭头函数不在同一行等）。以下是主要问题。

在style 对象字面量中的 React 中，CSS 规则是驼峰式的。应该是：
```
style={{ listStyleType: "none" }}
```
store.getState().todolist.map 不返回任何内容。它应该返回一个列表项元素。它也可能不应该呈现文字“item.icon+item.title”字符串，因此将其括在大括号中，以便呈现映射的item 值。
```
{store.getState().todolist.map((item, i) => (
  <li key={i}>{item.icon + item.title}</li>
))}
```
store 未从 const { store } = useContext(StoreContext); 定义。为您的上下文提供一个有效对象，该对象具有要解构的 store 键。
```
<StoreContext.Provider value={{ store: storeFactory() }}>
```

这会让你的代码运行和渲染，但我没有进一步调试。您还有其他问题，或者您尚未完全实现 ToDo 列表逻辑（可能是 f => f 回调）。

【讨论】：