Question

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

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

如果属性名称和值对不为空，并且为每个属性和信息定义了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>}
    );
}

有人可以帮助我重构一些可读性更好的代码吗？

谢谢。

Answer 1

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

Answer 2

您的变量命名没有遵循典型的JavaScript大小写。在Javascript中，我们使用camelCase。小写的第一个字母，随后的每个“单词”以大字母开头。您也在仔细检查this.data。另外，在您的示例中不需要拆分hasAttributes和hasInfo，因为您只关心其中之一是否为true。这意味着您可以合并它们。

如果您对代码样式有疑问，请考虑使用诸如ESLint之类的linter。

我想说这样的话可能更易读：

    const hasData = !!this.data && (
        this.data.some(data => data.info || (
            data.attributes.length > 0 &&
            data.attributes.some(attribute => attribute.name || attribute.value)
        ))
    );

    return (
        <div>
            {hasData ? 'Data available' : 'No data available'}
        </div>
    );

如何使用React重构代码以遍历对象数组？

2 个答案: