React复用组件渲染异常：遍历对象数组无内容显示

你的问题核心是组件的props传递与接收逻辑错误，导致组件无法获取到数据，以下是具体修复步骤：

1. 正确向PortfolioCard传递props #

遍历数组时，需要把portfolio对象的属性作为props传递给组件，两种简洁方式任选：

<div>
  {/* 方式1：逐个传递属性 */}
  {portfolioData.map((portfolio, i) => (
    <PortfolioCard 
      key={i}
      title={portfolio.title}
      url={portfolio.url}
      codeUrl={portfolio.codeUrl}
      mobileFriendly={portfolio.mobileFriendly}
      img={portfolio.img}
      techUsed={portfolio.techUsed}
    />
  ))}

  {/* 方式2：展开整个对象（更高效） */}
  {portfolioData.map((portfolio, i) => (
    <PortfolioCard key={i} {...portfolio} />
  ))}
</div>

2. 在PortfolioCard组件中接收并使用props #

组件必须通过props获取外部传入的数据，用解构赋值可以简化代码：

// 组件定义时解构接收props
const PortfolioCard = ({ title, url, codeUrl, mobileFriendly, img, techUsed }) => {
  return (
    <div>
      <img src={img} alt={title} />
      <h3>{title}</h3>
      {/* 注意：button标签不支持href，改用a标签实现跳转 */}
      <a target="_blank" href={url} rel="noopener noreferrer">
        <FaCode /> 查看网站
      </a>
      <a target="_blank" href={codeUrl} rel="noopener noreferrer">
        <CgWebsite /> 查看源码
      </a>
      <ul>
        <li>移动端适配：{mobileFriendly ? '是' : '否'}</li>
        {/* 遍历techUsed数组，渲染每个技术栈项 */}
        <li>使用技术：
          <ul>
            {techUsed.map((tech, idx) => (
              <li key={idx}>{tech}</li>
            ))}
          </ul>
        </li>
      </ul>
    </div>
  );
};

export default PortfolioCard;

额外优化点 #

• 替换button为a标签：button是交互控件，跳转逻辑用<a>标签更符合语义，同时添加rel="noopener noreferrer"避免安全风险。
• 渲染techUsed数组：直接显示数组会输出逗号分隔的字符串，需要遍历渲染每个技术栈元素。
• 添加img的alt属性：提升页面可访问性，用项目标题作为替代文本。

内容的提问来源于stack exchange，提问作者Leslie W.