React中动态键值对象数组的表单卡片展示问题求助

问题根源 #

当前代码中，FormListCard组件对传入的键值对数组执行了map遍历，每一个键值对都生成了独立的.form_list_card容器，导致每个表单对象的每个字段都变成了单独卡片，而非整个表单对象对应一张完整卡片。

修正方案 #

1. 重构FormListCard组件结构：把.form_list_card作为外层容器，内部遍历键值对渲染字段，而非遍历生成多个卡片。
2. 移除冗余状态逻辑：直接使用传入的props即可，无需将其存入组件状态。
3. 添加兜底处理：避免localStorage无数据时JSON.parse返回null导致报错。

修改后的代码 #

FormList 组件

function FormList() {
    // 兜底处理，避免localStorage无数据时返回null引发错误
    const arr = JSON.parse(localStorage.getItem('output')) || [];

    const localityParameterSets = arr.map(value => 
        Object.entries(value).map(([key, val]) => ({ name: key, value: val }))
    );

    return (
        <div className='form_list_main'>
            {localityParameterSets.map((element, index) => 
                <FormListCard key={index} fields={element} />
            )}
        </div>
    );
}

export default FormList;

FormListCard 组件

function FormListCard({ fields }) {
    // 直接使用传入的fields props，无需额外状态
    return (
        {/* 单个表单对象对应一张卡片 */}
        <div className='form_list_card'>
            {/* 遍历渲染当前表单的所有字段 */}
            {fields.map((item, index) => (
                <div key={index} className='form_field'>
                    <h6>{item.name}</h6>
                    <p>{item.value}</p>
                </div>
            ))}
        </div>
    );
}

export default FormListCard;

额外优化建议 #

• 替换key为唯一标识：如果表单对象包含唯一属性（如提交时间戳、自定义ID），用该属性替代index作为key，避免列表更新时出现渲染异常。
• 样式优化：给.form_field类添加间距、边框等样式，让卡片内的字段布局更清晰。

内容的提问来源于stack exchange，提问作者Shubham Chaudhary