JSX 错误：意外的令牌，预期为“，”

Question

我在使用 NextJS 编写 JSX 功能组件时遇到了意外错误。一旦我在代码中插入不同的组件，它就会返回“意外的令牌”错误。

我尝试过添加 {}、()、更改为 function Entries(){}、将模拟列表移动到函数中，但没有任何效果。当我将另一个组件放入退货中时，我仍然收到此错误。

功能组件入口

import Entry from './Entry'
import Detail from './Detail'

const mockList = [
    { title: "Subway"},
    { title: "Yokohama"},
    { title: "Tokyo Station"},
    { title: "Shibuya"},
    { title: "Shinjuku"},
]

const Entries = () => {

    return (
            mockList.map(list =>
                <Entry title={list.title} />
                )
            )

}

export default Entries

一旦我将 Entries 更改为

const Entries = () => {

    return (
            mockList.map(list =>
                <Entry title={list.title} />
                )
            <Detail />
            )

}

会弹出错误。

关于如何解决这个问题有什么建议吗？无法继续处理这个意外错误真是令人沮丧。

我正在编写功能组件作为在这个应用程序中使用 React Hooks 的练习。

Answer 1

组件中只能返回一个顶级标签。另外 javascript 部分必须在

{}

之间

const Entries = () => {
  return (
    <>
      {mockList.map(list => <Entry title={list.title} />)}
      <Detail />
    </>
  );
};

Answer 2

在您给出的第二个代码中：

const Entries = () => {

    return (
            mockList.map(list =>
                <Entry title={list.title} />
                )
            <Detail />
            )

}

您没有该组件的根容器。正如蒂亚戈已经说过的，这就是答案。对于那些遇到这个问题的人，我还得说，你需要用 <> 或任何容器来包围地图的 javascript 代码

它会（并且对我来说）发生了 array**.**map 点的错误“意外标记”，所以这也可能解决另一个问题。