React/JSX：遍历具有键/值对的对象

Question

我有一个对象，用于跟踪UI上哪些复选框被选中。

它看起来像这样：

      checked: { key1: false, key2: false, key3: false, key4: false, key5: false, key6: false, key7: false, key8: false, key9: false, key10: false },

我需要能够遍历该对象并根据用户希望从UI中获得的行为设置某些值为true/false。

我有两个问题：

1. 有没有更优雅的实例化方法？

2. 如何使用Object.entries方法来完成此操作？

我想做这样的事情，但它不起作用：

let obj = {k1: false, k2: false, k3: false}

Object.entries(obj).forEach(([key, value]) => {
    obj.value = true;
  console.log(`${key} ${value}`);

});

谢谢你！

- helloWorld

---

在编程中，"根据行为将值设置为true/false" 是什么意思？把键/值对存储在数组或映射中比分别存储在不同的属性中更易于扩展。 - undefined

感谢您的回复。我正在为页面上的复选框添加一个“全不选”选项。如果用户点击“全不选”，我需要将对象中的所有项目设置为false。如果用户点击“全选”，我需要将它们全部设置为true。如果用户选择其中一些项目，我需要更新对象中键/值对的布尔值，以反映哪些被选中，哪些没有被选中。我已经更新了我的问题，并尝试使用Object.entries来实现我所需的功能。 - undefined

你的示例有什么问题？ - undefined

@TomMendelson console.log的结果会打印出所有键/值对中值为false的内容。 - undefined

Answer 1

如果您需要将对象中的所有值设置为true，可以像这样操作：

Object.keys(obj).forEach(key => obj[key] = true);

Object.keys将以数组形式返回对象中的所有键。通过循环遍历该数组，然后使用obj[key]，我们可以访问对象的每个键并将其设置为true。

- Abito Prakash

Answer 2

回答你的问题 -

1. 这是一个存储多个选中布尔值的很好的方式，因为您可以使用对象解构访问它们，比如const {key1，key2，...} = checked，我认为这使得代码更易读。

2. 尝试 -

Object.entries(obj).forEach([key, value] => {
  // Set obj key/value
  obj[key] = true  // or use value here
})

参考 -

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

这是一个关于JavaScript中Object.entries()方法的参考链接。

- Sahil Lamba