由于陣列索引與列值不匹配而導致if和el條件中斷

我有一個這樣的資料庫表：

在我的react代碼中，在對該表進行api呼叫（在本帖中沒有顯示）后，結果被存盤在瀏覽器的sessionStorage中，作為Key和Value對，如下所示。

Key : categories

值：

[{
        "id"。0,
        "value": "Company0",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/0"。
            },
            "類別"/span>: {
                "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"。
            },
            "類別"/span>: {
                "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"。
            },
            "類別"/span>: {
                "href": "http://mydevserver.com:443/WebServices/api/categories/2": "href".
            }
        }
    },
    {
        "id": 5,
        "value": "公司5"。
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/5"。
            },
            "類別"/span>: {
                "href": "http://mydevserver.com:443/WebServices/api/categories/5"。
            }
        }
    },
    {
        "id": 99,
        "value": "公司其他"。
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/99"。
            },
            "類別"/span>: {
                "href": "http://mydevserver.com:443/WebServices/api/categories/99"。
            }
        }
    }
]

基本上，它在瀏覽器中看起來像以下內容。

我在react中擁有以下actionTemplate函式，用于顯示EDIT、DELETE和DOWNLOAD按鈕，如下所示：

在rowData變數中，我通過使用rowData.categoryId來訪問categoryId，這相當于上述表格的ID列。

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

                {
                       rowData.fullPathName !== null &&
                       < 按鈕 圖示="pi pi-download" tooltip='Download' onClick={（e） => 這。 handleDownloadClick(rowData, e)}。/>
                }
            </span> this.
            
        </div>/span>
       );

我的要求：

當ISEDITABLE列被設定為N時，不顯示EDIT按鈕。而當ISEDITABLE列被設定為Y時，顯示EDIT按鈕。

因此，我對上述函式進行了修改，以實作上述要求。然而，當陣列索引與上述表格的ID列不匹配時，我遇到了一個問題。

例如，只要rowData.categoryId=0,1和2，上述代碼就能正常運行，因為直到ID=2，它與陣列索引相匹配。然而，一旦達到ID=5或99，它就會中斷，因為ID=5的陣列索引位置是4，ID=99是5。

除了我使用的方法外，是否有解決這個問題的辦法？

uj5u.com熱心網友回復：

不使用索引，而使用.find來尋找你想要的專案：

JSON.parse（sessionStorage. getItem('categories') as string)。 find((category) =>  {
    return category.id === rowData.categoryId;
});

uj5u.com熱心網友回復：

因為categories是一個物件陣列，所以你需要使用find來獲得你想要的元素，像這樣：

{
    JSON.parse(sessionStorage. getItem('categories') as string）.find(
        category => category.id === rowData.categoryId )?
    )?.isEditable === 'N' ? (
        <Button ?
            icon="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="編輯"
            />
            <Button。
                icon="pi-trash"。
                style={{ marginRight: '5px' }}。
                tooltip="Delete"。
            />
        </span>
    );
}

標籤：

上一篇：重命名檔案時，嵌套的if回圈在python中不起作用

下一篇：ExcelVBA-如果B列包含特定的字母，則在A列添加連字符