React+TypeScript中如何映射外部文件中的数组？

云原生阿岚

2026-8-3

解决TS1382错误并正确实现数组映射

错误原因

你编写的map回调函数使用花括号包裹逻辑，但未显式返回JSX元素，TypeScript会将花括号识别为代码块而非返回值容器，从而触发语法错误。

正确实现方案

有两种写法可以修复该问题：

方案1：显式添加return

在回调函数内明确返回JSX元素：

navUrl.map((link) => {
  return <li key={link.name}><a href={link.url}>{link.name}</a></li>
})

方案2：用圆括号实现隐式返回

去掉花括号，改用圆括号包裹JSX，箭头函数会自动返回内部的JSX结构：

navUrl.map((link) => (
  <li key={link.name}><a href={link.url}>{link.name}</a></li>
))

完整组件代码

将映射后的列表项放入<ul>标签中，同时记得给每个<li>添加唯一key属性（React要求列表元素必须有key，避免渲染警告）：

import { AiFillShop } from 'react-icons/ai'
import { navUrl } from '../interfaces/navurl';

const Header = () => {
    return (
        <header className='w-full shadow-md fixed top-0 left-0 max-w'>
            <div className='md:flex bg-purple-700 py-7 md:px-10 px-7'>
                <div className="leftNav font-bold text-2xl cursor-pointer flex items-center font-[Poppins] ">
                    Super Shop
                    <span className='ml-2 cursor-pointer'>
                        <AiFillShop/>
                    </span>
                </div>
                <ul className="flex items-center">
                    {navUrl.map((link) => (
                        <li key={link.name} className="ml-6">
                            <a href={link.url} className="text-white hover:text-gray-200 transition-colors">
                                {link.name}
                            </a>
                        </li>
                    ))}
                </ul>
            </div>
        </header>
    );
};

export default Header;