时间戳

首页 > 解决方案 > 如何重构代码以使用反应循环遍历对象数组？

reactjs - 如何重构代码以使用反应循环遍历对象数组？

问题描述

我有具有属性属性和信息的对象数组...这些属性是具有名称和值对的对象数组。

我必须根据这些显示可用或不可用的数据。

如果属性名称和值对不为空，并且为每个属性和信息定义了 info 属性，那么我将显示消息“数据可用”，如果不是，则显示消息“无数据可用”。

下面是数据结构......

data: [
    {
        attributes: [
            {
                name: '', value: ''
            }, {
                name: '', value:
                    "somee"
            },
        ],
        info: 'ddd',
    },
    {
        attributes: [
            { name: '', value: '' },
        ],
        info: '',
    },
]

所以我尝试了类似下面的方法并且有效。

render = () => {
const has_attributes = this.data && 
    this.data.some((data) => data.attributes.length > 0 && 
        data.attributes.some(attribute => attribute.name || 
        attribute.value));
const has_info = this.data && this.data.some((data) => data.info);
    const has_some_data = has_attributes || has_info;
    return (
        {!this.data || !has_some_data) && 
            <div>No data available</div>}
        {this.data && has_some_data &&
            <div>Data available</div>}
    );
}

有人可以帮我重构一些更具可读性和减少代码的东西。

谢谢。

标签： reactjs

解决方案

您的问题是您的深层嵌套结构，而不是如何重构您的代码。使用多个嵌套数组，您的代码本质上看起来“脏”，您可以重构的只有这么多。考虑重构您的数据对象，因为您将尝试使用当前结构进行的任何操作都将变得更难管理和维护。

推荐阅读