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

niina 发表于 Dev

妮娜

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

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

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

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

谢谢。

美好的

您的变量命名不遵循典型的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>
    );

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。