React中map遍历成员列表时随机图片重复问题求助

遍历团队成员数据时，所有成员的loremflickr猫图完全相同，刷新页面会同步更换为另一张图，但每个成员始终无法显示独有的随机图片，其余数据展示正常。

数据示例 #

[
  {
    "name": "Jessika",
    "role": "Interaction Design",
    "location": "berlin",
    "image": "https://loremflickr.com/640/480/cat",
    "tags": [
      "salmon",
      "red"
    ]
  },
  {
    "name": "Kyra",
    "role": "Project Manager",
    "location": "amsterdam",
    "image": "https://loremflickr.com/640/480/cat",
    "tags": [
      "white",
      "gold"
    ]
  }
]

现有React代码 #

<div className="grid-item">
  {response && (
    <div className="card">
      {response.map((member: any) => {
        return (
          <div key={member.name} className="card__container">
            <div className="card-image">
              <img src={member.image} alt="Team member" />
            </div>
            <div className="card-content">
              <p>{member.name}</p>
            </div>
          </div>
        );
      })}
    </div>
  )}
</div>

问题根源 #

浏览器会缓存相同URL的资源，当所有<img>标签使用完全一致的loremflickr链接时，浏览器只会发起一次请求，后续直接复用缓存的图片，导致所有成员显示同一张图。

方案1：给图片URL添加唯一参数 #

利用成员的唯一标识（比如name）作为URL的查询参数，让每个图片链接唯一，避免缓存复用。直接在渲染时拼接即可：

// 渲染时给图片链接追加唯一参数
<img src={`${member.image}?unique=${member.name}`} alt="Team member" />

方案2：利用loremflickr关键词生成不同图片 #

loremflickr支持通过额外关键词返回不同图片，可以把成员的name或location作为附加标签，既生成不同图片，又让链接唯一：

// 用成员名称作为关键词，生成专属随机图
<img src={`https://loremflickr.com/640/480/cat,${member.name}`} alt="Team member" />

方案3：初始化时生成唯一图片链接 #

如果不想在渲染时动态拼接，可以在组件初始化阶段，提前给每个成员生成带唯一标识的图片URL：

const { useState, useEffect } = React;

const Example = () => {
  const [teamMembers, setTeamMembers] = useState([]);

  useEffect(() => {
    // 原始成员数据
    const rawData = [
      {
        name: "Jessika",
        role: "Interaction Design",
        location: "berlin",
        tags: ["salmon", "red"],
      },
      {
        name: "Kyra",
        role: "Project Manager",
        location: "amsterdam",
        tags: ["white", "gold"],
      },
    ];
    // 为每个成员生成唯一图片链接
    const membersWithUniqueImages = rawData.map(member => ({
      ...member,
      image: `https://loremflickr.com/640/480/cat?unique=${member.name}`
    }));
    setTeamMembers(membersWithUniqueImages);
  }, []);

  return (
    <div className="grid-item">
      {teamMembers.length > 0 && (
        <div className="card">
          {teamMembers.map((member) => {
            return (
              <div key={member.name} className="card__container">
                <div className="card-image">
                  <img src={member.image} alt="Team member" />
                </div>
                <div className="card-content">
                  <p>{member.name}</p>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

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