React本地运行时怪物卡片的图片与相关文字信息无法渲染怎么解决

问题定位 #

问题全部出在card-list.jsx文件的列表渲染逻辑中，共有两处错误：

• 第一处：map的回调函数使用了花括号包裹代码块，但没有显式返回Card组件，导致遍历后生成的是全为undefined的空数组，无法渲染任何内容。
• 第二处：没有将遍历得到的monster对象作为属性传递给Card组件，就算修复返回问题，Card组件也拿不到对应数据渲染图片和文字。

修复方案 #

直接替换card-list.jsx的内容即可，不改动原有代码结构：

import React from 'react';
import { Card} from '../card/card';
import './card-list.css';

export const CardList = props => {
    return (
    <div className='card-list'>
        {props.monsters.map((monster) => (
            <Card key={monster.id} monster={monster}/>
        ))}
    </div>
    )
};

说明：将原map回调的花括号替换为圆括号实现隐式返回，同时补上monster={monster}属性传递，Card组件即可正常拿到数据渲染对应内容。

内容的提问来源于stack exchange，提问作者Aaron Serpilin