React使用map渲染属性对象列表无内容问题求助

你的代码存在两个核心问题导致列表无法正常渲染：

1. 组件映射时未返回元素 #

第二个map方法中，箭头函数使用大括号但未显式返回Property组件，React无法获取到需要渲染的元素，因此列表内容不会显示。

2. 可选优化：简化数组转换逻辑 #

你先声明空数组再通过push填充的操作可以简化，直接用map返回新数组即可，代码更简洁高效。

修复后的代码 #

import Property from "../Property"
import { Container } from "./StyledComponents"

const PropsList = (props) => {
    // 直接转换数组，无需额外push操作
    const properties = props.items.map(arrayElement => ({
        key: arrayElement[0],
        value: arrayElement[1]
    }));

    return(
        <Container>
            {
                properties.map(element => (
                    // 用element.key作为唯一key，比index更稳定
                    <Property 
                        key={element.key} 
                        field={element.key} 
                        value={element.value}
                    />
                ))
            }
        </Container>
    )    
}
 export default PropsList

关键修改点 #

• 第二个map改用小括号包裹组件，让箭头函数自动返回元素（也可以在大括号内添加return关键字）
• 用element.key替代index作为组件的key，避免因组件复用引发的异常（前提是element.key为唯一值）
• 简化数组转换逻辑，直接通过map生成目标数组，减少冗余代码

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