React中数组索引与表ID不匹配导致if else条件判断失效如何解决

有两种常用的实现方案，你可以根据业务场景选择：

方案1：存储时转换为键值对结构（推荐） #

直接在存sessionStorage的阶段把数组处理为以分类ID为key的对象，后续取值时间复杂度为O(1)，性能最优，且原有取值逻辑几乎不用修改。
处理存储的代码示例：

// 假设接口返回的分类数据为categories数组
const categories = await getCategoriesApi()
// 用reduce转成ID为key的对象
const categoryMap = categories.reduce((result, item) => {
  result[item.id] = item
  return result
}, {})
// 存入sessionStorage
sessionStorage.setItem('categories', JSON.stringify(categoryMap))

后续判断逻辑保持原有写法即可，新增可选链避免异常：

const isShowEdit = JSON.parse(sessionStorage.getItem('categories') as string)?.[rowData.categoryId]?.isEditable === 'Y'

方案2：取值时遍历匹配（适合无法修改存储逻辑的场景） #

如果现有业务逻辑依赖categories的数组结构，不方便修改存储格式，可以用find方法匹配对应ID的分类项：

const categories = JSON.parse(sessionStorage.getItem('categories') as string) || []
// 匹配ID一致的分类项
const targetCategory = categories.find(item => item.id === rowData.categoryId)
const isShowEdit = targetCategory?.isEditable === 'Y'

该方案在分类数据量小于1000条时性能差异可忽略，数据量较大时优先选择方案1。

内容的提问来源于stack exchange，提问作者Tan