ReactJS中如何遍历渲染对象内按序号命名的metadata系列属性

你可以利用动态属性名+循环遍历的方式简化代码，因为你的metadata属性遵循固定的序号命名规则，直接遍历1到20的序号即可：

function unflatten(item) {          
    return (
        <div className="metabox">
            {/* 生成1-20的序号数组，遍历所有metadata组 */}
            {Array.from({ length: 20 }, (_, index) => index + 1).map(x => {
                // 动态读取当前序号的激活状态
                const isActive = item[`metadata${x}Active`];
                if (!isActive) return null;
                // 激活状态下返回对应展示内容
                return (
                    <p key={x}>
                        <label className="metadata">{item[`metadata${x}Name`]}</label>: 
                        <label className="metadata">{item[`metadata${x}`]}</label>
                    </p>
                );
            })}
        </div>
    );
}

如果你的metadata组数不固定，后续可能动态增减，也可以用正则匹配所有符合规则的属性来遍历，不需要硬编码总长度：

function unflatten(item) {
    // 匹配所有metadataXActive格式的属性，提取序号
    const metadataIndexes = Object.keys(item)
        .filter(key => /^metadata\d+Active$/.test(key))
        .map(key => key.match(/\d+/)[0]);
        
    return (
        <div className="metabox">
            {metadataIndexes.map(x => {
                const isActive = item[`metadata${x}Active`];
                if (!isActive) return null;
                return (
                    <p key={x}>
                        <label className="metadata">{item[`metadata${x}Name`]}</label>: 
                        <label className="metadata">{item[`metadata${x}`]}</label>
                    </p>
                );
            })}
        </div>
    );
}

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