React遍历种子数据时出现Expected an assignment or function call错误求助

错误原因 #

你的map回调函数写法存在语法问题：

1. 使用花括号{}包裹回调代码块时，必须显式返回渲染内容，否则函数无返回值；
2. 回调内部的{data.name}多了一层不必要的花括号，在代码块里这会被解析为孤立的对象字面量，JavaScript无法识别这种写法，因此抛出错误；
3. 回调参数名data和外层的data变量重名，容易造成混淆，建议修改为更清晰的名称（比如item）。

修复方案 #

提供两种可行的修复方式，任选其一即可：

方案1：显式使用return

import { Link } from "react-router-dom";
import {getData} from "../Data"

export default function Home() {
    let data = getData();
    return (
       <div>
        {data.map((item) => {
            // 显式return要渲染的元素，同时添加key属性（React要求）
            return <div key={item.name}>{item.name}</div>;
        })}
       </div>
    )
} 

方案2：箭头函数隐式返回（更简洁）

用圆括号代替花括号，箭头函数会自动返回括号内的内容，无需写return：

import { Link } from "react-router-dom";
import {getData} from "../Data"

export default function Home() {
    let data = getData();
    return (
       <div>
        {data.map((item) => (
            <div key={item.name}>{item.name}</div>
        ))}
       </div>
    )
} 

关键注意点 #

• 必须给map返回的每个元素添加唯一的key属性，这里用item.name作为key（确保每个name唯一），避免React渲染警告；
• 避免变量名重名，提升代码可读性。

内容的提问来源于stack exchange，提问作者Candace Pinero