由于数组索引与列值不匹配而导致 if 和 else 条件中断

我有一个这样的数据库表：

在我的反应代码中，在对该表进行 api 调用（本文未显示）后，结果存储在sessionStorage浏览器中Key，Value如下所示。

钥匙 ： categories

价值：

[{
        "id": 0,
        "value": "Company0",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/0"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/0"
            }
        }
    },
    {
        "id": 1,
        "value": "Company1",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/1"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/1"
            }
        }
    },
    {
        "id": 2,
        "value": "Company2",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/2"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/2"
            }
        }
    },
    {
        "id": 5,
        "value": "Company 5",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/5"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/5"
            }
        }
    },
    {
        "id": 99,
        "value": "Company Other",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/99"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/99"
            }
        }
    }
]

基本上，它在浏览器中看起来如下所示：

我有以下actionTemplate功能来显示EDIT,DELETE和DOWNLOAD按钮，如下所示：

在rowData变量中，我可以categoryId通过 using rowData.categoryIdwhich 来访问，这相当于ID上表的列。

actionTemplate = (rowData: any) => (
        console.log(rowData),
        <div style={{textAlign: 'center', width: '6em'}}>
            <span>
                { JSON.parse(sessionStorage.getItem('categories') as string)[rowData.categoryId].isEditable === 'N' ?
                   <Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
                   :
                  <span>
                  <Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => this.handleClick(rowData, e)} tooltip='Edit'/>
                  <Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
                  </span>
                
                }
               

                {
                       rowData.fullPathName !== null &&
                       <Button icon="pi pi-download" tooltip='Download' onClick={(e) => this.handleDownloadClick(rowData, e)} />
                }
            </span>
            
        </div>
       );

我的要求：

EDIT当ISEDITABLE列设置为时不显示按钮N。并EDIT在ISEDITABLE列设置为时显示按钮Y。

所以，我对上面的函数进行了修改，以达到上面的要求。但是，当数组索引与ID上表的列不匹配时，我遇到了问题。

例如，只要rowData.categoryId= 0,1 和 2上面的代码运行良好，因为直到ID = 2，它匹配数组索引。但是，一旦它达到 ID = 5 或 99，它就会中断，因为ID = 5is4和 for ID = 99is 的数组索引位置5。

除了我使用的方法之外，是否有解决此问题的方法？