React Props不渲染及相关报错问题排查求助

我在理解React Props和数组映射数据时遇到了困难，Props无法在Card组件上渲染，React DevTools里也看不到这些Props。同时还有两个报错：

• 'createCard'已定义但未使用——我明明把这个函数传入了App.jsx的map函数里，搞不懂为什么报错。
• 浏览器提示Warning: Each child in a list should have a unique "key" prop——我已经给数组元素分配了唯一id，疑惑为什么还会出现这个警告。

相关代码文件 #

Card.jsx #

import React from "react";

function Card(props) {
  return (
    <div>
      <div className="link-container">
        <div className="row">
          <div className="card">
            <hr className="divide"></hr>
            <img className="img" src={props.img} alt="social-icon" />
            <h4 className="name">{props.name}</h4>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Card;

App.jsx #

import Header from "./Header";
import Card from "./Card";
import links from "../links";

function createCard(socialLinks) {
  return <Card
    key={socialLinks.id}
    img={socialLinks.img}
    name={socialLinks.name}
    href={socialLinks.href}
  />;
}

function App() {
  return (
    <div>
      <Header />
      {
        links.map((createCard) => (
          <Card />
        ))
      }
    </div>
  );
}

export default App;

links.js #

const links = [
  {
    id: 1,
    name: "Youtube",
    img: "./img/youtube1.svg",
    href: "https://www.youtube.com/c/SubwaySounds"
  },
  {
    id: 2,
    name: "Spotify",
    img: "./img/spotify.svg",
    href: "https://artists.spotify.com/c/artist/3DM32kjsG7Pp5EM7o3Uv7t/profile/overview"
  },
  {
    id: 3,
    name: "Tiktok",
    img: "./img/tiktok.svg",
    href: "https://www.tiktok.com/@nysubwaysounds"
  },
  {
    id: 4,
    name: "Instagram",
    img: "./img/Instagram1.svg",
    href: "https://www.instagram.com/nycsubwaysounds/?hl=en"
  },
  {
    id: 5,
    name: "Shop",
    img: "./img/shop.svg",
    href: "https://my-store-11524143.creator-spring.com/"
  }
];

export default links;

问题排查与修复 #

1. Props不渲染+createCard未使用报错 #

你在App.jsx的map函数里犯了两个关键错误：

• 把map的参数命名成了createCard，这覆盖了外层定义的同名函数，导致实际根本没调用你写的createCard生成组件的逻辑。
• map里直接返回空的<Card />，没有传入任何Props，自然不会渲染数据。

修复方法：修改App.jsx的map部分，将参数名改为不冲突的名称（比如link），并调用createCard函数：

function App() {
  return (
    <div>
      <Header />
      {links.map(link => createCard(link))}
    </div>
  );
}

或者更简洁的写法，直接把createCard作为map的回调函数：

function App() {
  return (
    <div>
      <Header />
      {links.map(createCard)}
    </div>
  );
}

2. 唯一key警告问题 #

你之前把key正确放在了createCard返回的<Card>组件上，但因为没调用这个函数，React根本没拿到key值。修复上面的问题后，key会被正确传递给每个列表项，这个警告就会自动消失。

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