时间戳

首页 > 解决方案 > ReactJS - 如何在 API 中获取值以显示文本？

javascript - ReactJS - 如何在 API 中获取值以显示文本？

问题描述

我的 JSON API 显示以下内容：

 "crgAudittype": {
            "$id": "4",
            "Value": 3
        },

我试图做的是让它显示单词“transition”代替“3”。所以我用下面的代码创建了一个“.js”文件。

export const AUDIT_TYPES = {
    OCCUPIED: 'OCCUPIED',
    UNOCCUPIED: 'UNOCCUPIED',
    TRANSITION: 'TRANSITION',
    SHUTDOWN: 'SHUTDOWN'
};

export const allAuditTypes = [AUDIT_TYPES.OCCUPIED, AUDIT_TYPES.UNOCCUPIED, AUDIT_TYPES.TRANSITION, AUDIT_TYPES.SHUTDOWN];

export const auditTypeToIdMap = {
    1: AUDIT_TYPES.OCCUPIED,
    2: AUDIT_TYPES.UNOCCUPIED,
    3: AUDIT_TYPES.TRANSITION,
    4: AUDIT_TYPES.SHUTDOWN
};

export const getAuditTypeDescFromId = (auditTypeId) => auditTypeToIdMap[Number(auditTypeId)];

...我在要使用它的页面的标题中声明了“.js”文件。

import { getAuditTypeDescFromId, allAuditTypes, auditTypeToIdMap } from '../constants/audit-types';

现在在 Render() 部分，我像这样分配了值：

<b>Audit type:</b>  {Object.keys(auditTypeToIdMap).map(id => { id })}<br />

...但是，我不确定语法方面，如何使用上面的代码设置要显示的文本来代替值。请问我能得到一些帮助吗？...先感谢您

标签： javascriptreactjs

解决方案

很难，因为我们不知道 auditTypeToIdMap 的结构是什么样的，但我想我看到了你的问题。您正在使用 Object.keys 和 map，这意味着您实际上是通过数组映射两次。一次使用 Object.keys，然后在该迭代中，您将再次使用 map() 映射所有答案，从而为您提供四个“标签”。

此外，由于您已经在上面编写了函数，如果您在渲染中替换它，假设在此之前一切正确并且您已正确导入所有内容，这应该可以工作。

<b>Audit type:</b>  {this.auditTypeDescFromId(id)}

假设 auditTypeDescFromId 函数与您的渲染在同一个文件中

我确实认为有一种更清洁的方法来处理这个问题，也许使用 filter()。如果您可以解释您拥有哪些数据以及您试图用它做什么，我们可以为您提供更多帮助。

推荐阅读