Javascript 获取语法错误，表示意外令牌

如果我返回一个元素，并且将js代码放在{}中，那么为什么它不工作呢

从“React”导入React； 从“./卡”导入卡； const CardList={robots}=>{ 回来 {const cardComponent=robots.mapuser，i=> { 回来 } } } 导出默认卡片列表；

---

组件的格式不好。您试图在JSX组件中的return语句内部赋值，这就是它不工作的原因

以下任务是导致问题的原因

const cardComponent = robots.map((user,i)=>

请把它改到下面。此外，建议为循环中呈现的每个项提供键

import React from "react";
import Card from "./Card";

const CardList = ({ robots }) => {
  return (
    <div>
      {robots.map((user, i) => {
        return (
          <Card
            key={robots[i].id}
            id={robots[i].id}
            name={robots[i].name}
            email={robots[i].email}
          />
        );
      })}
    </div>
  );
};
export default CardList;

---

希望这有帮助。

您不能在react无状态/功能组件的返回语句中定义变量

试试这个：

import React from "react";
import Card from "./Card";

const CardList = ({ robots }) => {
  return (
    <div>
      {robots.map((user, i) => {
        return (
          <Card
            id={robots[i].id}
            name={robots[i].name}
            email={robots[i].email}
          />
        );
      })}
    </div>
  );
};
export default CardList;

假设机器人是一个数组，如果用户和每个用户都是一个对象，那么这应该是可行的

const CardList = ({ robots }) => (
    <div>
        {robots.map((user, i) => (
            <Card 
                id={user.id} 
                name={user.name} 
                email={user.email}
                key={i}
            />
        ))}
    </div>
);
export default CardList;

---

问题是，您在渲染中定义了变量cardComponent

你只需要

robots.mapuser，i=>

此外，您不需要使用robots[i]访问每个robots数组条目的内容，因为在本例中，它们会自动分配给map函数的第一个参数user

请参阅所附的Codesandbox以了解工作版本：

---

您能告诉我们错误消息吗？您只能将表达式放在JSX大括号内。变量声明或赋值是语句而不是表达式。如果您不知道语句和表达式是什么意思，我建议您研究它，因为它是许多编程的基础。