React映射仅显示单个项目及图片加载失败问题求助

一、仅显示单个项目的修复 #

1. 修正数据结构错误 #

原数据文件中所有项目都被写在同一个对象里，导致数组长度为1，map仅执行一次。需要将每个项目拆分为独立对象：

const data = [
  {
    id: 1,
    img: "../../assets/portfolio1.jpg",
    firstMedia: {
      mediaName: "Github",
      mediaUrl: "https://github.com",
    },
    secondMedia: {
      mediaName: "dribble",
      mediaUrl: "https://dribbble.com"
    }
  },
  {
    id: 2,
    img: "../../assets/portfolio2.jpg",
    firstMedia: {
      mediaName: "Github",
      mediaUrl: "https://github.com",
    },
    secondMedia: {
      mediaName: "dribble",
      mediaUrl: "https://dribbble.com"
    }
  },
  {
    id: 3,
    img: "../../assets/portfolio3.jpg",
    firstMedia: {
      mediaName: "Github",
      mediaUrl: "https://github.com",
    },
    secondMedia: {
      mediaName: "dribble",
      mediaUrl: "https://dribbble.com"
    }
  },
  {
    id: 4,
    img: "../../assets/portfolio4.jpg",
    firstMedia: {
      mediaName: "Github",
      mediaUrl: "https://github.com",
    },
    secondMedia: {
      mediaName: "dribble",
      mediaUrl: "https://dribbble.com"
    }
  },
  {
    id: 5,
    img: "../../assets/portfolio5.jpg",
    firstMedia: {
      mediaName: "Github",
      mediaUrl: "https://github.com",
    },
    secondMedia: {
      mediaName: "dribble",
      mediaUrl: "https://dribbble.com"
    }
  },
  {
    id: 6,
    img: "../../assets/portfolio6.jpg",
    firstMedia: {
      mediaName: "Github",
      mediaUrl: "https://github.com",
    },
    secondMedia: {
      mediaName: "dribble",
      mediaUrl: "https://dribbble.com"
    }
  }
]

export default data;

2. 重构Portfolio组件结构 #

原组件将整个<section>放入map循环，导致每个项目生成独立的标题区块，且key位置错误。需将固定标题和容器放在循环外，仅循环项目卡片：

import React from 'react'
import './portfolio.css'

const Portfolio = ({ items }) => {
    return (
        <section id="portfolio" >
            <h5>My Recent Works</h5>
            <h2>Portfolio</h2>
            <div className="container portfolio__container" >
                {items && items.map((item) => {
                    const { id, img, firstMedia, secondMedia } = item;
                    return (
                        <article className="portfolio__item" key={id}>
                            <div className="portfolio__item-image">
                                <img src={img} alt={`Portfolio item ${id}`} />
                            </div>
                            <h3>This is a portfolio item title</h3>
                            <div className="portfolio__item-cta">
                                <a href={firstMedia.mediaUrl} className={'btn'} target={'_blank'} rel="noreferrer"> 
                                    {firstMedia.mediaName}
                                </a>
                                <a href={secondMedia.mediaUrl} className={'btn btn-primary'} target="_blank" rel="noreferrer"> 
                                    {secondMedia.mediaName}
                                </a>
                            </div>
                        </article>
                    )
                })}
            </div>
        </section>
    )
}
export default Portfolio

• 注意：key需绑定在循环的最外层元素（<article>）上；给<a>标签添加rel="noreferrer"避免安全警告。

3. 简化App.js传参 #

原代码中多余的{...item}会传递数组索引作为无效props，修改为：

<Portfolio items={item} />

二、图片加载失败的修复 #

1. 修正图片路径 #

React中图片路径处理有两种可靠方式：

方法一：通过import导入图片

在数据文件中直接导入图片资源，避免路径错误：

import portfolio1 from '../../assets/portfolio1.jpg'
import portfolio2 from '../../assets/portfolio2.jpg'
import portfolio3 from '../../assets/portfolio3.jpg'
import portfolio4 from '../../assets/portfolio4.jpg'
import portfolio5 from '../../assets/portfolio5.jpg'
import portfolio6 from '../../assets/portfolio6.jpg'

const data = [
  {
    id: 1,
    img: portfolio1,
    // 其他属性不变
  },
  {
    id: 2,
    img: portfolio2,
    // 其他属性不变
  },
  // 剩余项目依次替换img值
]

方法二：使用public文件夹绝对路径

将assets文件夹移至项目根目录的public文件夹下，路径改为绝对路径：

const data = [
  {
    id: 1,
    img: "/assets/portfolio1.jpg",
    // 其他属性不变
  }
  // 剩余项目同理修改img路径
]

2. 校验图片资源 #

确认图片文件名拼写（大小写敏感）、格式（jpg/png等）正确，且文件确实存在于对应路径下。

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