React中使用useState定义对象状态时如何获取值为true的对应键

你提到的三个需求都可以通过原生JavaScript对象API实现，page本质是普通JS对象，无需特殊React专属API：

1. 查找值为true的键 #

使用Object.keys()获取所有键后匹配值即可，注意对象键默认是字符串类型，需要数字可主动转换：

// 匹配第一个值为true的键，示例返回数字4
const trueKey = Number(Object.keys(page).find(key => page[key] === true))

// 若存在多个值为true的键，用filter获取所有匹配项
const trueKeys = Object.keys(page).filter(key => page[key] === true).map(Number)

2. 获取键值对总长度 #

直接取对象键数组的长度即可：

// 示例返回7
const totalCount = Object.keys(page).length

3. 遍历所有键值对 #

React场景下常用Object.entries()同时拿到键和值，可直接用于列表渲染：

// 遍历打印所有键值
Object.entries(page).forEach(([key, value]) => {
  const pageNum = Number(key)
  console.log(`页码：${pageNum}，激活状态：${value}`)
})

// React渲染场景示例
return (
  <div>
    {Object.entries(page).map(([key, value]) => {
      const pageNum = Number(key)
      return <div key={pageNum} className={value ? 'active' : ''}>页码{pageNum}</div>
    })}
  </div>
)

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