Next.js中map遍历data对象访问属性时返回Undefined问题

渲染失败、看似访问属性返回undefined的核心问题和数据导入无关，是几处写法错误导致的：

• map遍历的回调函数使用花括号{}包裹逻辑时，没有显式return要渲染的JSX节点，每一次遍历的返回值都是undefined，根本没有执行到属性绑定逻辑，自然看不到内容。
• React/Next.js 不支持原生HTML的class属性声明样式类，必须替换为className，否则会触发渲染警告甚至节点解析异常。
• 遍历渲染列表时没有给列表根节点加唯一key标识，会触发React的diff算法警告，极端场景下会出现渲染错乱。
• 你写的图片相对路径不符合Next.js静态资源规则，直接写./images/xxx无法被正常解析加载。

数据文件section1.js本身没有问题，只需要修改业务组件代码即可：

import data from "../data/section1";

const Section1 = () => {
  return (
    <>
      <div className="mx-20">
        {data.map((item) => (
          <div key={item.id} className="">
            {/* 把images文件夹放到项目根目录的public文件夹下，直接用根路径引用即可 */}
            <img src={item.image.replace('./', '/')} alt={item.text} />
            <p>{item.text}</p>
          </div>
        ))}
      </div>
    </>
  )
}

export default Section1;

如果你习惯在map回调里写多行逻辑、保留花括号，一定要记得在JSX节点前加return，写法参考：

{data.map((item) => {
  // 此处可编写其他业务处理逻辑
  return (
    <div key={item.id} className="">
      <img src={item.image.replace('./', '/')} alt={item.text} />
      <p>{item.text}</p>
    </div>
  )
})}

如果修复代码后图片加载失败，检查你的资源存放路径：Next.js默认将public目录下的文件映射为站点根路径资源，你需要把存放图片的images文件夹整体移动到项目根目录的public文件夹内，不要放在组件目录、src目录下，否则相对路径无法被打包工具正确识别。

内容的提问来源于stack exchange，提问作者Kunal Badole