React函数组件中无法对字典数组调用map方法渲染卡片的问题

节点下写cards.map(...)没有加外层包裹的大括号，这段内容会被判定为普通文本，自然无法访问作用域内定义的cards变量。

除此之外代码还有3处会导致功能异常的问题，需要同步修正：

• map回调的遍历参数是单个卡片对象character，你内部取图片、名称属性时错误使用了数组本身cards.img/cards.name，应该读取当前遍历项character的对应属性
• React中DOM元素的类名属性需要使用className，你外层卡片div写的原生class属性不会被React正确识别
• <img>是自闭合单标签，不需要额外写</img>闭合标签

修复后的完整可运行代码如下：

function MemoryCards() {
    const images = [
        "./img/Abadango.jpeg",
        "./img/abradolf.jpeg",
        "./img/Adjudicator.jpeg",
        "./img/AgencyDirector.jpeg",
        "./img/Alan.jpeg",
        "./img/Albert.jpeg",
        "./img/Alexander.jpeg",
        "./img/AlienMorty.jpeg",
        "./img/AlienRick.jpeg",
        "./img/Annie.jpeg",
        "./img/AntsJonson.jpeg",
        "./img/Beth.jpeg",
        "./img/Jerry.jpeg",
        "./img/morty.jpeg",
        "./img/ricky.jpeg",
        "./img/summer.jpeg"
    ]

    const cards = [];
    let len = images.length;

    for (let i = 0; i < len; i++) {
        let end = images[i].indexOf('.', 3);
        let name = images[i].substring(6, end);
        let card = { 'name': name, 'img': images[i], 'id': i };
        cards.push(card);
    }

    return (
        <div>
            {cards.map((character) => (
                <div className="card" key={character.id}>
                    <div className="card_header">
                        <img src={character.img} alt={character.name} />
                    </div>
                    <div className="card_body">
                        <h3>{character.name}</h3>
                    </div>
                </div>
            ))}
        </div>
    )
}

export default MemoryCards;

额外提示：遍历渲染列表时建议给每一项加唯一key属性（这里用你提前生成的卡片id即可），可以避免React渲染时出现性能问题和状态异常。

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