React JS useState 获取值为 true 的键答案

【问题标题】：React JS useState get key where value is trueReact JS useState 获取值为 true 的键
【发布时间】：2021-11-26 16:40:02
【问题描述】：

这里有一个简单的问题。如何在值为 true 的状态下找到键？例如。假设我将此设置为状态：

const [page, setPage] = useState({
        1: false,
        2: false,
        3: false,
        4: true,
        5: false,
        6: false,
        7: false
    });

如何返回值为 true 的键？在这种情况下是 4？

我还想返回键/值对的长度 (7)，甚至可以循环键/值对，但这并不像我的主要问题那么重要。

希望您能提供帮助。谢谢。

【问题讨论】：

这个问题和react无关，也不是hook，也不是useState；是一个javascript问题
我知道如何遍历对象和数组并获取等的键和长度，但不通过 React 中的状态，因为我是新手。例如，javascript 中的 .length 返回数组的长度，但这不适用于状态对象，因为它试图使用键 .length 查找值。所以这确实是我在 react 和 react 钩子和 useState 方面遇到的问题。

标签： javascript object javascript-objects

【解决方案1】：

你可以遍历一个对象使用

Object.keys(myObject) 将返回所有密钥。
Object.values(myObject) 将返回所有值。
Object.entries(myObject) 将返回所有键和值。

应该是这样的：

for (const [key, value] of Object.entries(page)) {
  if (value) {
     console.log(key);
  }
}

【讨论】：

【解决方案2】：

您可以使用Object.entries() 获得[key, value] 对的数组，然后您可以使用所有相关的数组方法/属性：

const page = {
  1: false,
  2: false,
  3: false,
  4: true,
  5: false,
  6: false,
  7: false
}

const entries = Object.entries(page)

console.log({ firstTrue: entries.find(([, v]) => v)?.[0] })

console.log({ numberOfKeys: entries.length })

但是，将状态存储为数组会更容易：

const page = [false, false, false, true, false, false, false]

console.log({ firstTrueIndex: page.findIndex(v => v) })

console.log({ numberOfItems: page.length })

【讨论】：

【解决方案3】：

试试这个：

const [page, setPage] = useState({
        1: false,
        2: false,
        3: false,
        4: true,
        5: false,
        6: false,
        7: false
    });
    let trueValue=[];
    for (let i in page)
    {
      if (page[i] === true)
      trueValue.push(i);
    }
    console.log(trueValue);

此代码将迭代对象并在值为 true 时给出键。

【讨论】：