React中Array.map仅渲染数组首个元素问题求助

问题根源及修复方案 #

你遇到的问题主要由三个关键错误导致，逐一修复即可解决：

1. ReactDOM.render调用方式错误

你当前直接调用App()传入render方法，这会生成静态的React元素而非组件实例，会导致组件无法正常工作，进而引发渲染异常。

修复：
将ReactDOM.render(App() , document.getElementById('root'));改为：

ReactDOM.render(<App />, document.getElementById('root'));

2. 列表渲染缺少唯一key属性

使用Array.map渲染React列表时，必须为每个子组件添加唯一的key属性，React依赖这个属性识别列表项，没有key会导致渲染逻辑异常。

修复：
在map循环中为Card组件添加key（优先使用数据中唯一标识，比如id；如果没有可以临时用index）：

data.map((prop, index) => {
    return  <Card key={index} img={prop.img} title={prop.title} />
})

3. 重复使用全局唯一的id属性

Card组件中使用了id="card"、id="card-image"等id属性，而HTML规范要求id必须全局唯一，多个Card实例会导致重复id，这会干扰浏览器的DOM解析，引发渲染或样式问题。

修复：
将所有id替换为class：

export default function Card({img , title}){
    return (
        <div className="card">
            <div className="card-image">
                <img src={img} alt={title}></img>
            </div>
            <div className="card-info">
                <span className="card-title"><h3>{title}</h3></span>
                <span>
                    <h4>Weight : </h4>
                    <p></p>
                </span>
                <span>
                    <h4>Height :</h4>
                    <p></p>
                </span>
                <span>
                    <h4>Description :</h4>
                    <p></p>
                </span>
            </div>
        </div>
    );
}

完成以上修改后，两个Card组件就能正常渲染了。

内容的提问来源于stack exchange，提问作者Chahat Sagar