React组件中Robohash图片未随ID变化问题求助

你的代码里有两个问题导致所有id显示同一张图片：

1. 模板字符串使用错误：你用单引号'包裹URL，但包含${变量}的模板字符串必须用**反引号`**包裹，否则${id}会被当作普通字符串字面量，不会替换成实际的id值，所有请求的URL都是固定的https://robohash.org/${id}&720 *200，自然返回同一张图。

2. Robohash URL格式错误：原URL里的&720 *200参数不符合Robohash的规范，正确的尺寸参数应该用?size=宽度x高度的形式传递。

修改后的代码如下：

import React from 'react';

const Card = ({ name, email, id }) => {
    return(
        <div className='tc bg-light-green dib br3 ma2 grow bw2 shadow-5'>
           <img alt="robots" src={`https://robohash.org/${id}?size=200x200`} />
           <div>
                <h2>{name}</h2>
                <p>{email}</p>
            </div> 
        </div>
    );
}

export default Card;

额外补充：React组件名建议使用大驼峰命名（比如Card而非card），符合React的组件命名约定。

内容的提问来源于stack exchange，提问作者Okonkwo Makuochukwu Elijah